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

时间：2017-09-24 08:50:58

标签： google-maps google-maps-api-3 google-static-maps google-direction

我尝试使用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绘制此编码折线会产生正确的路径：

enter image description here

＆＃13;
＆＃13; 
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();
＆＃13; 
#map-canvas {
    height: 400px;
}
＆＃13; 
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>
<div id="map-canvas"></div>
＆＃13;
＆＃13;
＆＃13;

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

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 @米@ 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 @∪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容_ @ {白} DmOkFcJ} E_MkJ {WgTkLgL} I_KwJgGcHoBeGMaIjBuDhA_GRab @ aEoKuCqFaEoIsQaG} NkDuL_ @ QR〜BmNdR {b @ zEaW〜东欧@ vEsv @ vA型} JfEeNpG_Q | A_HfAwOq @ QQ {DeRgSou @ EB @ I | AyJc ^ aKcOeHyEm_ @ aNeOsFkDiCmEaGiIiV}ë@__ 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 {吨@〜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}Ĵ

并生成图像：

enter image description here

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

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

1 个答案:

答案 0 :(得分：4)

您在示例中使用的编码折线包含\\符号，我了解Google Maps JavaScript API会转义\反斜杠符号。在将编码折线传递给Static Maps API之前，您应该使用简单的反斜杠替换转义的反斜杠。

您的请求将是：

＆＃13;
＆＃13; 
<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" />
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题