Question

我正在尝试使用此代码来执行我需要的操作，即在地图上有多个折线原点和目的地，并且可以单击原点标记以显示有关路线的文本。

此示例的问题是目标只有一个纬度/长度，但我需要为每个原点添加不同的目标纬度/长度，以及每个原点的唯一标记文本/标题。谁能告诉我怎么做？

感谢您的帮助。

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

Answer 1

你的所有行最终都在同一个目的地的原因是：

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

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

多个谷歌地图折线

1 个答案: