Question

我一直在努力扩展this示例以包含折线。到目前为止，我根本无法让它工作。我的代码目前看起来像这样：

function initialize() {
  var locations = [
      [12.239107980270559, 109.1947902572488, 'Nha Trang', 'Vietnam', '27/03/13', 1],                            
      [11.938864949999937, 108.43334708999994, 'Dalat', 'Vietnam', '28/03/13', 2],                            
      [10.76674113559709, 106.69295712387172, 'Ho Chi Minh', 'Vietnam', '02/04/13', 3],                            
      [10.035511715481054, 105.78650841255843, 'Can Tho', 'Vietnam', '06/04/13', 4],                            
      [10.379392700137583, 104.48601004588143, 'Ha Tien', 'Vietnam', '07/04/13', 5],                            
      [10.607085236979454, 104.18364549108138, 'Kampot', 'Cambodia', '09/04/13', 6],                            
      [10.615441163514843, 103.5214887207791, 'Sihanoukville', 'Cambodia', '12/04/13', 7],                           
      [10.575040390060632, 103.54923875808034, 'Otres Beach', 'Cambodia', '15/04/13', 8] 
  ];
  var mapOptions = {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 9,
    center: new google.maps.LatLng(10.575040390060632, 103.54923875808034),
    panControl: false,
    scaleControl: false,
    mapTypeControl: false,
    streetViewControl: false,
    overviewMapControl: false,
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL,
      position: google.maps.ControlPosition.RIGHT_TOP
    }
  };
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  var infowindow = new google.maps.InfoWindow();
  var marker, poly, i;
  for (i = 0; i < locations.length; i++) {  
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][0], locations[i][1]),
      map: map
    });
    poly = new google.maps.Polyline({
      path: new google.maps.LatLng(locations[i][0], locations[i][1]),
      strokeColor: '#000000',
      strokeOpacity: 1.0,
      strokeWeight: 3
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][2]);
        infowindow.open(map, marker);
      }
    })(marker, i));
  }
}
function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyAhnheFVYaMG44DfbXYCuNmKHuf15Ar1_I&sensor=true&callback=initialize";
  document.body.appendChild(script);
}
window.onload = loadScript;

我想问题是数组，因为它不是标准的做法（根据Google文档），我只是不知道如何正确调用它。非常感谢任何帮助。

Answer 1

您需要将折线的创建移出循环，并向其提供LatLng对象数组。

var arr = [];
for (var i = 0; i < locations.length; i++) {  
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][0], locations[i][1]),
      map: map
    });
    arr.push(marker.getPosition());

  // <-- snipped -->
}

Edit:

  var poly = new google.maps.Polyline({
      path: arr,
      strokeColor: '#000000',
      strokeOpacity: 1.0,
      strokeWeight: 3,
      map: map    
    });

Google Maps JS API v3 - 简单的多标记+折线

1 个答案: