google-maps - 在静态 map 中使用来自 Google Directions API 的编码折线的路径不正确

Question

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

例如，我请求了 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>

但是，当在静态 map 中使用相同的编码多段线时，路径开始于伯尔尼，结束于苏黎世以北。这是静态 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_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

和生成的图像:

我试过设置 geodesic参数为 true和 false但似乎没有区别。

可以在静态 map 中使用来自 Google Directions 的编码多段线吗？如果是这样，需要哪些参数才能正确显示它们？

Answer 1

您在示例中使用的编码多段线包含 \\ 符号，据我所知 Google Maps JavaScript API 转义了 \ 反斜杠符号。在将编码的折线传递给静态 map 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" />