gpt4 book ai didi

google-maps - 在 Google map 中绘制折线

转载 作者:行者123 更新时间:2023-12-03 22:37:28 24 4
gpt4 key购买 nike

我正在探索 Google Maps Direction API 并注意到我收到了 overview_polyline -> points结果。我可以在此处的“编码折线”字段中输入该值:https://developers.google.com/maps/documentation/utilities/polylineutility .结果似乎是从开始位置到结束位置的实际行车路线。数据对我来说是正确的。

我想在谷歌地图中看到这一点,但在起点和终点之间没有所有 map 标记。如何获取这些信息并将其绘制在 Google map 上?

最佳答案

来自 Google Maps Javascript API 开发人员指南:Geometry Library: Geometry Encoding

To decode an encoded path, simply call decodePath() passing the method the encoded string.



需要注意的是,请注意反斜杠编码(如果您有问题,请将“\\”的编码路径字符串中的任何出现替换为“\”)

example fiddle

代码片段:

var map;
var bounds = new google.maps.LatLngBounds();

function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(34, 108),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

var jsonData = {
"overview_polyline": {
"points": "e`miGhmocNaN~DiBiNe@gEkEek@kNez@cJqq@sk@pGos@v]_}@aF_y@qm@qDe~@w]g~@gZ_Jo_@m_@yNsFgUpMov@~QebBrJq`BjTsx@w@kOqbEq_@qkCcf@}}Dej@yzCuf@o{Ba]m~EtVewAnBa`@sNmm@}dDufGqwA_|D_z@g~CmtBkuOrBmtCyG_yCam@{`Ee]qkB}d@ucDmDe|Aha@e}At]{v@xD}e@yf@aeIm^{rEgp@ahBiZu`BkVueH}gDwuXu`Fi__@yZecHgoAgyIl[ybCo^sgD_n@akBaJmeBog@yyAe`@ayB~FifCjNkmAzTwpAgf@cpFy~@{lJsg@ojHyi@e_Fq}@o`Dog@}tBoYmz@y`@sf@qf@ohCkLugBuv@seAg[ul@mMowBqc@iiC}eAcwCqm@_fBmuAypFyIiqA}BwyBy`@ogAwt@ypBezC{dIahBwxJgb@ytCw~AwvJkQwu@{t@yrCg{@s{Fgb@ehDzKsdAxO}vAiRmpCwcAorNuwAgdS_r@imJq[orAk]wrA_TyzAnFefAa\\guB_OmwAwF{tCwMcbDcr@m}_@}Qo_RgMo|A|d@kpAne@u{Brb@wnDzNkuB_D{v@eSgf@w\\ieAyb@guCii@ifCga@i_Amc@m]urAyoD}o@kiIsr@opQuLkhAc_@q`Bq\\}bEeEyi@iE}t@pHi|@tBmlBebB{qHq_BinFoWgpBoDuqEob@k{ConAedC}L}h@yd@yfAgz@}gAaZi_@m}@mcBwyAaj@_bBg|@csBm_Bo|BkaC{iBqsB_YqyBxEmtBks@aoB{RgLa~@bCcr@cLyoAemBeg@gt@_}@e`@on@uu@etA}vCqp@ubAklDgeGmxFiqHaqFoeHa[wbBu]}gAuoDeeG{uAooB_uAsy@om@ugAu_L{xSshEe_KieDm|KcfIcuWeUcOwy@aP{QuUg`BipF{P_l@klAgaEmjEs}NsvAiyFs}@izFjwAqrGtHkbCeB{cEql@g~CgSk|@mB}oAqNekEgw@cmDo_BgjFqqC}gH}`CwvG}cA{cB}nFowQ_t@an@efBmpE_oAsvCka@mwBk_CqbGuu@qfB{uAmrDivDw|E{nAqbDmpCyaJgdCejHk~@owAsw@adAm_@abA}Ven@qCou@cKeiBca@_cBmlAyjAsn@_kCk}@smDkVg{Bk}@gcHox@_sEaPwdC~KazF{EcpCrEmeGl]auBeEi~@yiAovCwwAgsC{i@oSsbAu~Ay_AmaBk_@iKak@mh@_BmBk@wHvG@dBvA"
}
};
var path = google.maps.geometry.encoding.decodePath(jsonData.overview_polyline.points);
console.log(path);
for (var i = 0; i < path.length; i++) {
bounds.extend(path[i]);
}

var polyline = new google.maps.Polyline({
path: path,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map
// strokeColor: "#0000FF",
// strokeOpacity: 1.0,
// strokeWeight: 2
});
polyline.setMap(map);
map.fitBounds(bounds);

}


google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

关于google-maps - 在 Google map 中绘制折线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29481300/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com