javascript - name - marcar puntos en google maps api

Google map api dibujado polilínea con puntos codificados

Question

Soy nuevo en javascript y api de mapa de Google, así que he codificado puntos como este: "yzocFzynhVq} @n} @o} @nzD" y tratando de dibujar una polilínea con él, no he encontrado temas o documentos para resolver mi problema . Hay pocos temas sobre cómo decodificarlo, pero no necesito hacer eso. Solo necesito dibujar una polilínea usando puntos codificados. ¿Podría alguien darme un ejemplo?

Answer 1

Consulte la documentación de la biblioteca de geometría para decodePath

Eso convertirá tu cadena codificada en una matriz de objetos google.maps.LatLng que se pueden usar para crear una polilínea.

Ejemplo de trabajo

fragmento de código de trabajo:

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>