Question

此演示脚本在google-map上绘制线条（折线），从一个点到所有其他点，但是它使用地址对所有点（地图中心除外）。如何修改此脚本以使用所有纬度和经度数据而不是地址＆＃39;

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

Answer 1

删除对地理编码器的调用并将其替换为类似于问题的数组：Google Maps JS API v3 - Simple Multiple Marker Example，使第0个位置成为＆＃34; hub＆＃34;。数组中的对象具有lat和lng属性，因此可以用作LatLngLiteral个对象：

＆＃13;

//add locations
var locations = [
  {address: 60033, lat: 42.4444701, lng: -88.6144839}, 
  {address: 44145, lat: 41.4470451, lng: -81.9207423}, 
  {address: 03103, lat: 42.9561485, lng: -71.44181}, 
  {address: 30236, lat: 33.5213067, lng: -84.3226488}, 
  {address: 18106, lat: 40.5825021, lng: -75.6149893}, 
  {address: 64147, lat: 38.8524485, lng: -94.5469705}, 
  {address: 86401, lat: 35.1115663, lng: -113.8584737}, 
  {address: 75110, lat: 32.0302037, lng: -96.5143087}, 
  {address: 56001, lat: 44.1223003, lng: -93.9674371}, 
  {address: 80239, lat: 39.8086537, lng: -104.8337879}, 
  {address: 95776, lat: 38.6944843, lng: -121.6967438}];

function initMap() {
    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
    });

    new google.maps.Marker({
        position: locations[0],
        title: ""+locations[0].address,
        map: map
    });

    for (var i = 1; i < locations.length; i++) {

        new google.maps.Marker({
            position: locations[i],
            title: ""+locations[i].address,
            map: map
        });

        new google.maps.Polyline({
            path: [
            locations[0],
            locations[i]],
            strokeColor: '#FF0000',
            geodesic: true,
            map: map
        });
    }
}
google.maps.event.addDomListener(window, 'load', initMap);

＆＃13;

html, body, #map {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

＆＃13;

修改脚本以使用纬度/经度而不是地址

1 个答案: