Pregunta

Estoy tratando de dibujar una polilínea geodésica con Google Maps JavaScript API de dos Dirección puntos.

var polyOptions = {geodesic:true};
var polyline = new GPolyline([
    new GLatLng(),
    new GLatLng()
  ], "#f36c25", 5, 0.8, polyOptions
);

map.addOverlay(polyline);

if (GBrowserIsCompatible()) {
  map.addOverlay(polyline);
}

¿Alguien podría decirme cómo puedo geocodificar dinámicamente una dirección en coordenadas glatlng? Estoy un poco confundido después de leer Documentación de API de Google.

¿Fue útil?

Solución

Es posible que desee consultar el siguiente ejemplo. Primero intenta geocodificar address1. Si tiene éxito, intenta geocodificar address2. Si ambos tienen éxito, traza la polilínea geodésica entre las dos coordenadas y dos marcadores:

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
  <title>Google Maps API Geocoding Demo</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    var address1 = 'London, UK';
    var address2 = 'New York, US';

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: new google.maps.LatLng(35.00, -25.00),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var gc = new google.maps.Geocoder();

    gc.geocode({'address': address1}, function (res1, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        gc.geocode({'address': address2}, function (res2, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            new google.maps.Marker({
              position: res1[0].geometry.location,
              map: map
            });

            new google.maps.Marker({
              position: res2[0].geometry.location,
              map: map
            });

            new google.maps.Polyline({
              path: [
                res1[0].geometry.location,
                res2[0].geometry.location
              ],
              strokeColor: '#FF0000',
              geodesic: true,
              map: map
            });
          }
        });
      }            
    });

  </script>
</body>
</html>

Captura de pantalla:

Google Maps API Geocoding Demo

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top