多个谷歌地图多段线 [英] 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.
p>
这个例子的问题是目的地只有一个纬度/长度，但我需要为每个原点添加不同的目标纬度/长度，以及独特的标记文本/标题为每个。任何人都可以告诉我如何做到这一点？
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>
推荐答案
正因为如此：
The reason why all your lines end up at same destination is because of this:
path: [lineCoordinates[i], domain[0]],
所以他们从不同的 lineCoordinates [i] 开始，但最终结果相同坐标域[0] ，即11.2583，75.1374。你需要确定你希望他们真正结束的地方，然后相应地进行编码。
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.
这篇关于多个谷歌地图多段线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
