谷歌地圖api繪製折線與編碼點

Question

我是新的JavaScript和谷歌地圖api，所以我已經編碼像這樣的點：「yzocFzynhVq} @n} @o} @nzD」並試圖用它畫出折線，我沒有找到主題或文檔來解決我的問題。有幾個主題如何解碼，但我不需要做那件事。我只需要使用編碼點繪製折線。有人可以舉個例子嗎？

Answer 1

見geometry library documentation for decodePath

將在您的編碼字符串轉換成google.maps.LatLng物件的陣列，可用於創建Polyline

Working example

工作代碼片段：

function initialize() { 
 
    var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875); 
 
    var mapOptions = { 
 
    zoom: 13, 
 
    center: myLatLng, 
 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
 
    }; 
 

 
    var bermudaTriangle; 
 

 
    var map = new google.maps.Map(document.getElementById('map_canvas'), 
 
    mapOptions); 
 

 

 
    // Construct the polygon 
 
    bermudaTriangle = new google.maps.Polygon({ 
 
    paths: google.maps.geometry.encoding.decodePath("yzocFzynhVq}@n}@o}@nzD"), 
 
    strokeColor: '#FF0000', 
 
    strokeOpacity: 0.8, 
 
    strokeWeight: 2, 
 
    fillColor: '#FF0000', 
 
    fillOpacity: 0.35 
 
    }); 
 

 
    bermudaTriangle.setMap(map); 
 
    map.setCenter(bermudaTriangle.getPath().getAt(Math.round(bermudaTriangle.getPath().getLength()/2))); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#map_canvas { 
 
    height: 100%; 
 
} 
 
@media print { 
 
    html, 
 
    body { 
 
    height: auto; 
 
    } 
 
    #map_canvas { 
 
    height: 650px; 
 
    } 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script> 
 
<div id="map_canvas"></div>