多条谷歌地图多段线

Multiple google map polylines

本文关键字：段线 谷歌地图      更新时间：2023-09-26

我正试图使用此代码来完成我所需要的任务，即在地图上有多条折线的起点和终点，并能够单击起点标记来显示有关路线的文本。

这个例子的问题是目的地只有一个纬度/经度，但我需要为每个原点添加不同的目的地纬度/经度以及每个原点的唯一标记文本/标题。有人能教我怎么做吗？

谢谢你的帮助。

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

所有线路最终到达同一目的地的原因是：

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

所以它们开始于不同的lineCoordinates[i]，但结束于相同的坐标domain[0]，即11.258375.1374。您需要确定它们的实际结束位置，然后进行相应的编码。

相关文章：