Google地图地理编码多行

时间:2012-04-27 04:11:29

标签: javascript google-maps geocoding polyline

我正在尝试使用来自多个位置对的Google Maps JavaScript API绘制多个测地线折线。我找到了98%的我正在寻找的东西(http://stackoverflow.com/questions/2994424/google-maps-geocoding-address-to-glatlng),但我无法弄清楚如何添加额外的积分和其他线路(也显示芝加哥,美国和洛杉矶,美国之间的界限)。感谢任何人提供的任何帮助。

1 个答案:

答案 0 :(得分:3)

新更新,此更新将目标点编码放入单独的函数中,并独立进行每个地理编码调用。应该比尝试嵌套回调过程更具可扩展性。

<!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: 1280px; height: 1024px;"></div>

  <script type="text/javascript">
//add locations
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: new google.maps.LatLng(35.00, -25.00),
      mapTypeId: google.maps.MapTypeId.TERRAIN
    });

    var address1 = '60033';

    var gc = new google.maps.Geocoder();
    gc.geocode({'address': address1}, function (res1, status) {

        var hub = res1[0].geometry.location;
        new google.maps.Marker({
            position: res1[0].geometry.location,
            map: map
          });

        geocodeLine(hub, '44145');  
        geocodeLine(hub, '03103');
        geocodeLine(hub, '30236');
        geocodeLine(hub, '18106');
        geocodeLine(hub, '64147');
        geocodeLine(hub, '86401');
        geocodeLine(hub, '75110');
        geocodeLine(hub, '56001');
        geocodeLine(hub, '80239');
        geocodeLine(hub, '95776');
    });   

    function geocodeLine(hub, address)
    {
        var gc = new google.maps.Geocoder();

        gc.geocode({'address': address}, function (res, status) { 
            if (status == google.maps.GeocoderStatus.OK) {

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

              new google.maps.Polyline({
                path: [
                  hub,
                  res[0].geometry.location
                ],
                strokeColor: '#FF0000',
                geodesic: true,
                map: map
                });
            }
        });
    }
  </script>
</body>
</html>