用折线连接多个标记 [英] Connect Multiple markers with polyline

问题描述

我尝试了这段代码，但是折线没有运气，可能是因为问题太小，我无法获得连接标记的折线.
我需要用折线连接多个标记，也欢迎使用任何其他代码.

I tried this code but no luck with polylines,may be because of small issue, i couldn't get polylines that connect the markers.
I need to connect multiple marker with polylines any alternative code also is welcome.

var locations = [];
// call php array
var latitude = <?php echo json_encode($latitude); ?>;
var longitude = <?php echo json_encode($longitude); ?>;
for(var i=0;i<20;i++){
 locations.push(["current",latitude[i], longitude[i]]);
}

var marker;
          function initMap() {
           var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 5,
          center: new google.maps.LatLng(12.289774217827633, 76.30976921188685)
          });

var flightPath = new google.maps.Polyline({
                                            path: locations,
                                            geodesic: true,
                                            strokeColor: '#000000',
                                            strokeOpacity: 1.0,
                                            strokeWeight: 3
  });


flightPath.setMap(map);
 var infowindow = new google.maps.InfoWindow();
 var marker, i;

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

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
}

推荐答案

flightPath应该作为数组调用.

flightPath should be called as an array.

请尝试使用此更新的代码.

Please try this updated code.

var locations = [

   ];

// call php array
 var latitude = <?php echo json_encode($latitude); ?>;
 var longitude = <?php echo json_encode($longitude); ?>;
for(var i=0;i<20;i++){
 locations.push(["current",latitude[i], longitude[i]]);
}
var marker;
     function initMap() {
       var map = new google.maps.Map(document.getElementById('map'), {
         zoom: 5,
         center: new google.maps.LatLng(12.289774217827633, 76.30976921188685)
       });


// locations.push(["current",test2, test3]);
 var infowindow = new google.maps.InfoWindow();

 var marker, i;
var flightPlanCoordinates = [];

   for (i = 0; i < locations.length; i++) {  
     marker = new google.maps.Marker({
       position: new google.maps.LatLng(locations[i][1], locations[i][2]),
       map: map
     });
flightPlanCoordinates.push(marker.getPosition());
     google.maps.event.addListener(marker, 'click', (function(marker, i) {
       return function() {
         infowindow.setContent(locations[i][0]);
         infowindow.open(map, marker);
       }
     })(marker, i));
   }
   var flightPath = new google.maps.Polyline({
     map: map,
     path: flightPlanCoordinates,
     strokeColor: "#ff0000",

     strokeOpacity: 1.0,
     strokeWeight: 2
   });
}

这篇关于用折线连接多个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！