在Google地圖中繪製折線

Question

我在探索Google Maps Direction API，並注意到我得到一個overview_polyline→points結果。我可以在此處的「編碼折線」字段中輸入該值：https://developers.google.com/maps/documentation/utilities/polylineutility。結果似乎是從開始位置到結束位置的實際行車路線。數據看起來很適合我。

我想在谷歌地圖中看到這個，但沒有在開始和結束位置之間的所有地圖標記。我如何獲取這些信息並將其繪製在Google地圖上？

Answer 1

從谷歌地圖的JavaScript API開發人員指南：Geometry Library: Geometry Encoding

爲了解碼編碼的路徑，只需撥打decodePath()傳遞方法的編碼字符串。

需要說明的是反斜槓編碼的提防（更換任何發生在「\\」與你的編碼路徑字符串「\」，如果你有問題）

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"></script> 
 
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>