Multiple google map polylines

问题

I'm trying to use this code to do what I'm needing, which is to have multiple polyline origins and destinations on my map, with the ability to click on the origin marker to display text about the route.

The problem with this example is the destination is only one lat/long, but I need to add the different destination lat/longs for each origin, as well as unique marker text/title for each. Can anyone show me how to do this?

Thanks for your help.

<html>
<head>
<style type="text/css">
html {
  height: 100%;
  width: 100%;
}
body {
  height: 100%;
  width:  100%
  margin: 0;
  padding: 0
}
#map_canvas {
  height: 100%;
  width: 100%;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBdTuWJjEUMvQZ6VVPGksE12XNgQgs__Qk&sensor=false&libraries=visualization"></script>
<script language="javascript">
 var line;
 var lines = [];
 var myLatlng = new google.maps.LatLng(41.7833, 5.2167);
 var marker;
function initialize(){
var styles = [
  {
    "featureType": "administrative.country",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "administrative",
    "elementType": "geometry",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "landscape",
    "stylers": [
      { "visibility": "on" },
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "water",
    "stylers": [
      { "visibility": "on" },
      { "color": "#FFFFFF" }
    ]
  },{
    "featureType": "landscape.man_made",
    "stylers": [
      { "visibility": "off" },
      { "color": "#efffff" }
    ]
  },{
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "transit",
    "stylers": [
      { "visibility": "off" }
    ]
  }
];  

var symbolOne = {
  strokeColor: '#F00',
  fillColor: '#F00',
  fillOpacity: 1
};

var domain = [new google.maps.LatLng(11.2583, 75.1374)];
var markers = [];

var mapOptions = {
  zoom:2,
  center: myLatlng, 
  mapTypeId: google.maps.MapTypeId.ROADMAP, 
  opacity: 0.2,
  disableDefaultUI: true,
  draggable: false,
  styles: styles
};

map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var lineCoordinates = [
  new google.maps.LatLng(53.215556, 56.949219),
  new google.maps.LatLng(75.797201, 125.003906),
  new google.maps.LatLng(37.7833, 144.9667),
  new google.maps.LatLng(-24.797201, 26.003906),
  new google.maps.LatLng(27.797201, -101.003906)
];

var lineSymbol = {
    path: google.maps.SymbolPath.FORWARD_OPEN_ARROW                  
};

for(i=0;i<lineCoordinates.length;i++){ 
  markers.push(new google.maps.Marker({
    position: lineCoordinates[i],
    map: map
  }));

line = new google.maps.Polyline({
  path: [lineCoordinates[i], domain[0]],
  strokeOpacity: 0.5,
  strokeWeight:1,
  strokeColor: '#000',
  geodesic: false,
  icons: [{
    icon: lineSymbol,
    offset: '100%',
    repeat: '60px'
  }]
});
 line.setMap(map);
 lines.push(line);
} //end of for loop
// alert(lines.length);
animate();

} //end of initialize function

function animate(){
  var count = 0;
  offsetId = window.setInterval(function(){
    count = (count + 1) % 2000;
    for (var i=0; i<lines.length; i++) {
     var icons = lines[i].get('icons');
     icons[0].offset = (count / 2) + '%';
     lines[i].set('icons', icons);
    }
  }, 200);
}// end of animate function
</script>
</head>
<body onLoad="initialize()">
    <div id="map_canvas" style="width: 100%; height: 100%; "></div>  
</select>   
</body>
</html>

回答1:

The reason why all your lines end up at same destination is because of this:

path: [lineCoordinates[i], domain[0]],

So they start at different lineCoordinates[i], but end up at same coordinate domain[0], which is 11.2583, 75.1374. You need to determine where you want them to actually end, then code accordingly.

来源：https://stackoverflow.com/questions/18143864/multiple-google-map-polylines

标签

javascript

google-maps

google-maps-api-3