我正在尝试在Google地图上的多个标记之间绘制线条。成功绘制了多个标记,但无法绘制多条线。
我尝试了以下代码,只绘制了一条线:
以下是地图截图:
如何在多个点之间绘制线条?
请帮忙。
谢谢。
我尝试了以下代码,只绘制了一条线:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&callback=map_init"></script>
<script type="text/javascript">
function InitializeMap() {
var ltlng = [];
ltlng.push(new google.maps.LatLng(17.22, 78.28));
ltlng.push(new google.maps.LatLng(13.5, 79.2));
ltlng.push(new google.maps.LatLng(15.24, 77.16));
// var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
//center: latlng,
center: ltlng[0],
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
for (var i = 0; i < ltlng.length; i++) {
var marker = new google.maps.Marker
(
{
// position: new google.maps.LatLng(-34.397, 150.644),
position: ltlng[i],
map: map,
title: 'Click me'
}
);
}
//***********ROUTING****************//
//Intialize the Path Array
var path = new google.maps.MVCArray();
//Intialize the Direction Service
var service = new google.maps.DirectionsService();
//Set the Path Stroke Color
var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });
//Loop and Draw Path Route between the Points on MAP
for (var i = 0; i < ltlng.length; i++)
{
if ((i + 1) < ltlng.length) {
var src = ltlng[i];
var des = ltlng[i + 1];
path.push(src);
poly.setPath(path);
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
}
});
}
}
}
window.onload = InitializeMap;
</script>
<h2>Creating Your First Google Map Demo:</h2>
<div id="map" style="width: 800px; top: 68px; left: 172px; position: absolute; height: 500px">
</div>
以下是地图截图:
![在此输入图片描述](https://istack.dev59.com/Ruba8.webp)
请帮忙。
谢谢。