2010-06-08 21 views
3

J'essaie de dessiner une polyligne géodésique avec l'API JavaScript de Google Maps à partir de deux points adresse . Quelqu'un peut-il me dire comment puis-je géocoder dynamiquement une adresse dans les coordonnées GLatLng? Géocodage de Google Maps (adresse à GLatLng)

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); 
} 
Je suis un peu confus après avoir lu Google's API documentation.

Répondre

2

Vous pouvez vérifier l'exemple suivant. D'abord, il essaie de géocoder address1. S'il réussit, il essaie de géocoder address2. Si les deux réussissent, il trace la polyligne géodésique entre les deux coordonnées, et deux marqueurs:

<!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> 

Screenshot:

Google Maps API Geocoding Demo

+0

Si vous avez un milliard de points sur votre carte comme je le fais. cela semble plutôt cool: 'var color = '#' + (Math.random() * 0xFFFFFF << 0) .toString (16); \t \t \t \t \t \t nouvelle google.maps.Polyline ({ \t \t \t chemin \t: [ \t \t \t \t initialLocation, \t \t \t \t current_point \t \t \t \t], \t \t \t \t strokeColor: couleur, \t \t \t \t géodésique: true, \t \t \t \t Carte: \t \t \t \t}); ' –