在静态地图中使用来自 Google Directions API 的编码折线的路径不正确

Question

我正在尝试使用 Google 方向 API 中的编码折线并将其显示在 Google 静态地图图像中。当我在静态地图中使用编码的折线时，路径显示不正确 - 它从正确的位置开始，并且具有正确的一般路径，但与预期结果有所偏差。

例如，我请求了

rail

从伯尔尼到苏黎世机场的路线。 API 返回以下编码的折线：

}sp}Gmrkl@m@wIiAaB_BaA}IcCmLoFqG_DuFkAyN[mEiBqN}MqFsLqUoxAyG{`@qGqJwDkBeJMod@lScMzF{OfCwH[oGwAwI{EyOiTcS{e@mKkd@iGsi@wKem@iKg[aPg[_N_RiE{EoUaR{f@}X}d@sWo[mN}]_KqYcDePyCcQaGeUuM{PoO_SsWcLeTiSsi@{Ka[yRgb@sN{S}RaS_XkRiX{OiO{GgMiEoc@aDwq@{Eig@qHyhAeQ{n@_Nqj@uOqp@qTcZmNyZkUcRkSsIiL{Qq[qHuPuLk]wIe]mLqd@sLm\\kf@y`Ayk@eeAu`AazA}JgR{Qeb@yHsX}Gg\\uDyViEwn@wHup@w_@_sCyT_~AsVuwAkGaT}Qud@cZch@y{@{gB_OeTaPkQkf@ae@kQcQ}MwPoQu[{GgPkJiZiEoRaIgh@_Gm[oQyj@kPk\\iPkTi[cYuOyIqQsGcYuFm]gCug@g@cU{G}IaGeHcH}IsMyFaMsKi]eLw`@qKab@kIwe@eDkLyKwRiGsFoOuGcGkAuQm@uH_@{W}DmOkFcXiQ{WgTkLgL}I_KwJgGcHoBeGMaIjBuDhA_GRab@aEoKuCqFaEoIsQaG}NkDuL_@qR~BmNdR{b@zEaW~Cee@vEsv@vA}JfEeNvH{T|AcKXyN{AgQeDeNeHqWwYseAcX_eA}IwSqGiHsHeE{g@uQeJqFeF{H_EuLyWg|@wX{_AqIkc@_[klB_Q{iAgRegCkTsqCmK{sAgJgx@qAeZPeNtAsOpGoVhRe[|E}LlJob@`Mwj@vFoWvLsk@bBcPaAmX_ByRcJmgAsCa]yEaTuFqJsG{Foa@}P}JoIsJmQuKoRgFgLgCuJaTghAwI}`@cJsVgIsMgZ{XkH{KsGqRcD_XE_ZXwn@}`AylKyBeWEsLrAiTfB}LzS{w@|Mcj@fTez@tOmi@lLmb@dGkOhO{\\rE_FtJgPv[eh@~EeG`HoK|LmH~SuJjGqEbHuN|Eic@lGsu@bAyQYmP}B{o@iDqaAuAus@zCcYnEkTtMmu@|Jak@fUerAzC_SLyNpD_\\~DuXbJq`@zDySbDqJrM{o@bCcOjG}WnAsFv@kEdAyFeAxFw@jEc@`Bo@~BsCbNyBdLsAzHOzOaAlKaDhGiEzBoFOiDgCgD{HiEoPcG_HiVaLiF_CwIwFgFaBiOkFoQgIe[iNsJyF}DoFuGeOyHgXmGeHcLmJwZwXkb@k`@yMaLkHiDaKeB_Ly@}CVcEtAaE|CQJiMdHyJxCgWv@cSyDmIaIuBuE

使用 Google Maps API 绘制此编码折线会产生正确的路径：

function initialize() {

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: {
            lat: 47.23,
            lng: 8.00
        },
        zoom: 09
    });

    var encoded_data = '}sp}Gmrkl@m@wIiAaB_BaA}IcCmLoFqG_DuFkAyN[mEiBqN}MqFsLqUoxAyG{`@qGqJwDkBeJMod@lScMzFcFvAwHn@wH[oGwAwI{EwFqGaHwKcS{e@mKkd@iGsi@wKem@iKg[aPg[_N_RiE{EoUaR{f@}X}d@sWo[mN}]_KqYcDePyCcQaGeUuM{PoO_SsWcLeTiSsi@{Ka[yRgb@sN{S}RaS_XkRiX{OiO{GgMiEoc@aDwq@{Eig@qHyhAeQ{n@_Nqj@uOqp@qTcZmNyZkUcRkSsIiL{Qq[qHuPuLk]wIe]mLqd@sLm\\kf@y`AiRm^oXwe@u`AazA}JgR{Qeb@yHsX}Gg\\uDyViEwn@wHup@w_@_sCyT_~AaKgo@qJmg@kGaT}Qud@cZch@y{@{gB_OeTaPkQkf@ae@kQcQ}MwPoQu[{GgPkJiZiEoRaIgh@_Gm[oQyj@kPk\\iPkTi[cYuOyIqQsGcYuFm]gCug@g@cU{G}IaGeHcH}IsMyFaMsKi]eLw`@qKab@kIwe@eDkLyKwRiGsFoOuGcGkAuQm@uH_@{W}DmOkFcJ}E_MkJ{WgTkLgL}I_KwJgGcHoBeGMaIjBuDhA_GRab@aEoKuCqFaEoIsQaG}NkDuL_@qR~BmNdR{b@zEaW~Cee@vEsv@vA}JfEeNpG_Q|A_HfAwOq@qQ{DeRgSou@eb@i|AyJc^aKcOeHyEm_@aNeOsFkDiCmEaGiIiV}e@__B}Kkc@{Q{fAg\\wpBkLqrAeWuiDyUuwCqGak@aA_SFeNjCwWhI_W`MaRjFgLbVueAdHa[fP}w@fAqT_BoVoHi}@{Hq{@yF}QyFaImH_FaQqGmQcJqH}IuWag@yFkQ{FyZcVcmAeJ_W{LcRqOaNgK{KeI{PeFoW}@eTp@qp@e@oRqHkr@gx@{|IwA_St@iSbAgNnGsXhRks@pNwk@bQsp@tVu|@zF}PhN}\\rDoH~BaCvDqEn]el@fP_VrDiFbDaCdXoMbIgErCcDpCaFdCqIpFil@vFsq@ViQ}@qS{Bop@uCkaA{@o[\\yV`N{t@~W{zAdVowAZeNvA_MbEmTxHeZb@}IpCwQbIe`@jMgp@tC_PvFkT~CgMdAaGeA`Gq@xDkAhEaBdHsBvIcE`SG|OsAlKaDlF{ErBgFg@}CoCaDcI{EcQ}F{FcHaDiNiGwGoDwGgEgOkEca@mQmVaLyFgEcIiOaG_QiDuLsBuCuJkIgWsT_m@uj@iPgNqSaEoKc@cBRgFpB_DdCqMjHyJxCsJv@aW_AcNsGuF}J';

    var decode = google.maps.geometry.encoding.decodePath(encoded_data);

    var line = new google.maps.Polyline({
        path: decode,
        strokeColor: '#red',
        strokeOpacity: 1.0,
        strokeWeight: 4,
        zIndex: 3
    });

    line.setMap(map);
}

initialize();

#map-canvas {
    height: 400px;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>
<div id="map-canvas"></div>

但是，当在静态地图中使用相同的编码折线时，路径从伯尔尼开始，到苏黎世北部遥远的地方结束。这是静态 URL：

https://maps.googleapis.com/maps/api/staticmap?size=512x512&scale=2&maptype=terrain&style=feature:all&path=weight:3%7Ccolor:0xff0000ff%7Cgeodesic:true%7Cenc:}sp}Gmrkl@ m@wIiAaB_BaA}IcCmLoFqG_DuFkAyN[mEiBqN}MqFsLqUoxAyG{

@qGqJwDkBeJMod@lScMzFcFvAwHn@wH[oGwAwI{EwFqGaHwKcS{e@mKkd@iGsi@wKem@iKg[aPg[_N_RiE{EoUaR{f@}X}d@sWo[mN}]_KqYcDePyCcQaGeUuM{PoO_SsWcLeTiSsi@{Ka[yRgb@sN{S}RaS_XkRiX{OiO{GgMiEoc@aDwq@{Eig@qHyhAeQ{n@_Nqj@uOqp@qTcZmNyZkUcRkSsIiL{Qq[qHuPuLk]wIe]mLqd@sLm\\kf@y

AiRm^oXwe@u

AazA}JgR{Qeb@yHsX}Gg\\uDyViEwn@wHup@w_@_sCyT_~AaKgo@qJmg@kGaT}Qud@cZch@y{@{gB_OeTaPkQkf@ae@kQcQ}MwPoQu[{GgPkJiZiEoRaIgh@_Gm[oQyj@kPk\\iPkTi[cYuOyIqQsGcYuFm]gCug@g@cU{G}IaGeHcH}IsMyFaMsKi]eLw

@qKab@kIwe@eDkLyKwRiGsFoOuGcGkAuQm@uH_@{W}DmOkFcJ} E_MkJ{WgTkLgL}I_KwJgGcHoBeGMaIjBuDhA_GRab@aEoKuCqFaEoIsQaG}NkDuL_@qR~BmNdR{b @zEaW~Cee@vEsv@vA}JfEeNpG_Q|A_HfAwOq@qQ{DeRgSou@eb@i|AyJc^aKcOeHyEm_@aNeOsFkDiCmEaGiIiV}e@__B}Kkc@{Q{fAg\wpBkLqrAeWuiDyUuwCqGak@aA_SF eNjCwWhI_W

MaRjFgLbVueAdHa[fP}w@fAqT_BoVoHi}@{Hq{@yF}QyFaImH_FaQqGmQcJqH}IuWag@yFkQ{FyZcVcmAeJ_W{LcRqOaNgK{KeI{PeFoW}@eTp@qp@e@oRqHkr@gx@{|IwA_St@iSbAgNnGsXhRks@pNwk@bQsp@tVu|@zF}PhN}\\rDoH~BaCvDqEn]el@fP_VrDiFbDaCdXoMbIgErCcDpCaFdCqIpFil@vFsq@ViQ}@qS{Bop@uCkaA{@o[\\yV

N{t@~W {zAdVowAZeNvA_MbEmTxHeZb@}IpCwQbIe

@jMgp@tC_PvFkT~CgMdAaGeA

Gq@xDkAhEaBdHsBvIcE`SG|OsAlKaDlF{ErBgFg@}CoCaDci{EcQ}F{FcHaDiNiGwGoDwGgEgOkEca@mQmVaLyFgEciiO aG_QiDuLsBuCuJkIgWsT_m@uj@iPgNqSaEoKc@cBRgFpB_DdCqMjHyJxCsJv@aW_AcNsGuF}J

和结果图像：

我尝试将

geodesic

参数设置为

true

和

false

但似乎没有区别。

Google Directions 中的编码折线可以在静态地图中使用吗？如果是这样，需要什么参数才能正确显示它们？

Answer 1

您在示例中使用的编码折线包含

\\

符号，我了解 Google Maps JavaScript API 会转义

\

反斜杠符号。在将编码的折线传递给静态地图 API 之前，您应该用简单的反斜杠替换转义的反斜杠。

您的要求将是：

<img src="https://maps.googleapis.com/maps/api/staticmap?size=512x512&scale=2&maptype=terrain&style=feature:all&path=weight:3%7Ccolor:0xff0000ff%7Cgeodesic:true%7Cenc:}sp}Gmrkl@m@wIiAaB_BaA}IcCmLoFqG_DuFkAyN[mEiBqN}MqFsLqUoxAyG{`@qGqJwDkBeJMod@lScMzFcFvAwHn@wH[oGwAwI{EwFqGaHwKcS{e@mKkd@iGsi@wKem@iKg[aPg[_N_RiE{EoUaR{f@}X}d@sWo[mN}]_KqYcDePyCcQaGeUuM{PoO_SsWcLeTiSsi@{Ka[yRgb@sN{S}RaS_XkRiX{OiO{GgMiEoc@aDwq@{Eig@qHyhAeQ{n@_Nqj@uOqp@qTcZmNyZkUcRkSsIiL{Qq[qHuPuLk]wIe]mLqd@sLm\kf@y`AiRm^oXwe@u`AazA}JgR{Qeb@yHsX}Gg\uDyViEwn@wHup@w_@_sCyT_~AaKgo@qJmg@kGaT}Qud@cZch@y{@{gB_OeTaPkQkf@ae@kQcQ}MwPoQu[{GgPkJiZiEoRaIgh@_Gm[oQyj@kPk\iPkTi[cYuOyIqQsGcYuFm]gCug@g@cU{G}IaGeHcH}IsMyFaMsKi]eLw`@qKab@kIwe@eDkLyKwRiGsFoOuGcGkAuQm@uH_@{W}DmOkFcJ}E_MkJ{WgTkLgL}I_KwJgGcHoBeGMaIjBuDhA_GRab@aEoKuCqFaEoIsQaG}NkDuL_@qR~BmNdR{b@zEaW~Cee@vEsv@vA}JfEeNpG_Q|A_HfAwOq@qQ{DeRgSou@eb@i|AyJc^aKcOeHyEm_@aNeOsFkDiCmEaGiIiV}e@__B}Kkc@{Q{fAg\wpBkLqrAeWuiDyUuwCqGak@aA_SFeNjCwWhI_W`MaRjFgLbVueAdHa[fP}w@fAqT_BoVoHi}@{Hq{@yF}QyFaImH_FaQqGmQcJqH}IuWag@yFkQ{FyZcVcmAeJ_W{LcRqOaNgK{KeI{PeFoW}@eTp@qp@e@oRqHkr@gx@{|IwA_St@iSbAgNnGsXhRks@pNwk@bQsp@tVu|@zF}PhN}\rDoH~BaCvDqEn]el@fP_VrDiFbDaCdXoMbIgErCcDpCaFdCqIpFil@vFsq@ViQ}@qS{Bop@uCkaA{@o[\yV`N{t@~W{zAdVowAZeNvA_MbEmTxHeZb@}IpCwQbIe`@jMgp@tC_PvFkT~CgMdAaGeA`Gq@xDkAhEaBdHsBvIcE`SG|OsAlKaDlF{ErBgFg@}CoCaDcI{EcQ}F{FcHaDiNiGwGoDwGgEgOkEca@mQmVaLyFgEcIiOaG_QiDuLsBuCuJkIgWsT_m@uj@iPgNqSaEoKc@cBRgFpB_DdCqMjHyJxCsJv@aW_AcNsGuF}J&key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU" title="test" />

Answer 2

这样做的问题是浏览器无法识别（'\'）双反斜杠。我建议将其替换为 URL 的编码表示形式，即将每个双反斜杠 ('\') 替换为 '%5C'。

在Python中：

# this is the same url in the question
your_url = "https://maps.googleapis.com/maps/api/staticmap?size=512x512&scale=2&maptype=terrain&style=feature:all&path=weight:3%7Ccolor:0xff0000ff%7Cgeodesic:true%7Cenc:}sp}Gmrkl@m@wIiAaB_BaA}IcCmLoFqG_DuFkAyN[mEiBqN}MqFsLqUoxAyG{@qGqJwDkBeJMod@lScMzFcFvAwHn@wH[oGwAwI{EwFqGaHwKcS{e@mKkd@iGsi@wKem@iKg[aPg[_N_RiE{EoUaR{f@}X}d@sWo[mN}]_KqYcDePyCcQaGeUuM{PoO_SsWcLeTiSsi@{Ka[yRgb@sN{S}RaS_XkRiX{OiO{GgMiEoc@aDwq@{Eig@qHyhAeQ{n@_Nqj@uOqp@qTcZmNyZkUcRkSsIiL{Qq[qHuPuLk]wIe]mLqd@sLm\\kf@yAiRm^oXwe@uAazA}JgR{Qeb@yHsX}Gg\\uDyViEwn@wHup@w_@_sCyT_~AaKgo@qJmg@kGaT}Qud@cZch@y{@{gB_OeTaPkQkf@ae@kQcQ}MwPoQu[{GgPkJiZiEoRaIgh@_Gm[oQyj@kPk\\iPkTi[cYuOyIqQsGcYuFm]gCug@g@cU{G}IaGeHcH}IsMyFaMsKi]eLw@qKab@kIwe@eDkLyKwRiGsFoOuGcGkAuQm@uH_@{W}DmOkFcJ}E_MkJ{WgTkLgL}I_KwJgGcHoBeGMaIjBuDhA_GRab@aEoKuCqFaEoIsQaG}NkDuL_@qR~BmNdR{b@zEaW~Cee@vEsv@vA}JfEeNpG_Q|A_HfAwOq@qQ{DeRgSou@eb@i|AyJc^aKcOeHyEm_@aNeOsFkDiCmEaGiIiV}e@__B}Kkc@{Q{fAg\wpBkLqrAeWuiDyUuwCqGak@aA_SFeNjCwWhI_WMaRjFgLbVueAdHa[fP}w@fAqT_BoVoHi}@{Hq{@yF}QyFaImH_FaQqGmQcJqH}IuWag@yFkQ{FyZcVcmAeJ_W{LcRqOaNgK{KeI{PeFoW}@eTp@qp@e@oRqHkr@gx@{|IwA_St@iSbAgNnGsXhRks@pNwk@bQsp@tVu|@zF}PhN}\\rDoH~BaCvDqEn]el@fP_VrDiFbDaCdXoMbIgErCcDpCaFdCqIpFil@vFsq@ViQ}@qS{Bop@uCkaA{@o[\\yVN{t@~W{zAdVowAZeNvA_MbEmTxHeZb@}IpCwQbIe@jMgp@tC_PvFkT~CgMdAaGeAGq@xDkAhEaBdHsBvIcE`SG|OsAlKaDlF{ErBgFg@}CoCaDcI{EcQ}F{FcHaDiNiGwGoDwGgEgOkEca@mQmVaLyFgEcIiOaG_QiDuLsBuCuJkIgWsT_m@uj@iPgNqSaEoKc@cBRgFpB_DdCqMjHyJxCsJv@aW_AcNsGuF}J&key={API_KEY}"

valid_url = your_url.replace("\\", "%5C")

由此产生的图像是：