Polilinea api disegnata con Google mappa con punti codificati

Question

Sono nuovo in javascript e Google map api, quindi ho punti codificati come questo: "yzocFzynhVq} @n} @o} @nzD" e cerco di disegnare polilinea con esso, io non ho trovato argomenti o documenti per risolvere il mio problema. Ci sono pochi argomenti su come decodificarlo, ma non ho bisogno di fare quella cosa. Ho solo bisogno di disegnare polilinea usando punti codificati. Qualcuno potrebbe darmi un esempio?

Answer 1

Vedi l'geometry library documentation for decodePath

che converte la stringa codificata in un array di oggetti google.maps.LatLng che può essere utilizzato per creare un frammento di codice Polyline

Working example

di lavoro:

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>