Google map api gezeichnete Polylinie mit codierten Punkten

Question

Ich bin neu in Javascript und Google map api, so habe ich Punkte wie diese codiert: "yzocFzynhVq} @n} @o} @nzD" und versuchen, Polylinie damit zu zeichnen, ich habe keine Themen oder Dokumente gefunden, um mein Problem zu lösen. Es gibt wenige Themen, wie man es entschlüsseln kann, aber ich muss das Ding nicht machen. Ich muss nur Polylinie mit codierten Punkten zeichnen. Könnte mir jemand ein Beispiel geben?

Answer 1

Siehe geometry library documentation for decodePath

Das encodierten String in ein Array von google.maps.LatLng Objekte konvertiert, die verwendet werden können Polyline

Working example

Arbeits Code-Snippet zu erstellen:

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>