直线是随谷歌地图API路线图

-1

我有一个关于谷歌地图API的查询。我通过一个地理点（假设C）绘制两个地理位置（假设A和B）之间的路线图。问题是：第一次加载地图时，A点和B点之间总是有一条直线，以及这三个点（A，B和C）之间的路线图。但是当map重新加载时，直线（A和B之间）会按预期消失。您能否在这方面帮助我。我的代码如下。直线是随谷歌地图API路线图

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
 
<script type="text/javascript"> 
 
var markers = [ 
 
{ 
 
"title": 'Alibaug', 
 
"lat": '28.4700', 
 
"lng": '77.0300', 
 
"description": 'Alibaug is a coastal town and a municipal council in Raigad District in the Konkan region of Maharashtra, India.' 
 
} 
 
, 
 
{ 
 
"title": 'Mumbai', 
 
"lat": '28.6139', 
 
"lng": '77.2090', 
 
"description": 'Mumbai formerly Bombay, is the capital city of the Indian state of Maharashtra.' 
 
} 
 
, 
 
{ 
 
"title": 'Pune', 
 
"lat": '28.5700', 
 
"lng": '77.3200', 
 
"description": 'Pune is the seventh largest metropolis in India, the second largest in the state of Maharashtra after Mumbai.' 
 
} 
 

 
]; 
 
window.onload = function() { 
 
var mapOptions = { 
 
center: new google.maps.LatLng(markers[0].lat, markers[0].lng), 
 
zoom: 10, 
 
mapTypeId: google.maps.MapTypeId.ROADMAP 
 
}; 
 
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); 
 
var infoWindow = new google.maps.InfoWindow(); 
 
var lat_lng = new Array(); 
 
var latlngbounds = new google.maps.LatLngBounds(); 
 
for (i = 0; i < markers.length; i++) { 
 
var data = markers[i] 
 
var myLatlng = new google.maps.LatLng(data.lat, data.lng); 
 
lat_lng[i]=myLatlng; 
 

 
var marker = new google.maps.Marker({ 
 
position: myLatlng, 
 
map: map, 
 

 
}); 
 
latlngbounds.extend(marker.position); 
 
} 
 
map.setCenter(latlngbounds.getCenter()); 
 
map.fitBounds(latlngbounds); 
 

 
//***********ROUTING****************// 
 

 
//Initialize the Path Array 
 
var path = new google.maps.MVCArray(); 
 
//Initialize 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 < lat_lng.length; i++) { 
 

 
if ((i + 1) < lat_lng.length) { 
 
var src = lat_lng[i]; 
 
var des = lat_lng[i + 1]; 
 
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]); 
 
} 
 
} }); 
 
} } } 
 
</script> 
 
<div id="dvMap" style="width: 500px; height: 500px"> 
 
</div>

来源

2015-07-12 Lok Raj

我没有看到任何多余的线条[您发布的代码（http://jsfiddle.net/geocodezip/0tg2b2es /）。你在测试什么浏览器？ – geocodezip

^对我来说，我使用Chrome运行代码段时看起来正确。 –

仅发送一个请求。如果您的积分总数少于10点（使用免费API，Google Maps for Business总积分为25点），则可以使用单一请求以及源代码，目标代码和航点，这将减少Google的负担（Google Maps Directions Service supports waypoints）服务器并使响应更加一致。

您看到的行为的一个可能的原因是方向服务的异步行为。如果回复的顺序与发送顺序不同，您可以看到您描述的行为。

proof of concept fiddle

代码片段：

window.onload = function() { 
 
    var mapOptions = { 
 
    center: new google.maps.LatLng(markers[0].lat, markers[0].lng), 
 
    zoom: 10, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); 
 
    var infoWindow = new google.maps.InfoWindow(); 
 
    var lat_lng = []; 
 
    var latlngbounds = new google.maps.LatLngBounds(); 
 
    for (i = 0; i < markers.length; i++) { 
 
    var data = markers[i]; 
 
    var myLatlng = new google.maps.LatLng(data.lat, data.lng); 
 
    lat_lng[i] = myLatlng; 
 

 
    var marker = new google.maps.Marker({ 
 
     position: myLatlng, 
 
     map: map 
 
    }); 
 
    latlngbounds.extend(marker.position); 
 
    } 
 
    map.setCenter(latlngbounds.getCenter()); 
 
    map.fitBounds(latlngbounds); 
 

 
    //***********ROUTING****************// 
 

 
    //Initialize the Path Array 
 
    var path = new google.maps.MVCArray(); 
 
    //Initialize 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 
 
    var request = { 
 
    travelMode: google.maps.DirectionsTravelMode.DRIVING 
 
    } 
 
    for (var i = 0; i < lat_lng.length; i++) { 
 
    if (i == 0) { 
 
     request.origin = lat_lng[i]; 
 
    } else if (i == lat_lng.length - 1) { 
 
     request.destination = lat_lng[i]; 
 
    } else { 
 
     if (!request.waypoints) { 
 
     request.waypoints = []; 
 
     } 
 
     request.waypoints.push({ 
 
     location: lat_lng[i] 
 
     }); 
 
    } 
 
    } 
 
    service.route(request, 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]); 
 
     } 
 
     poly.setPath(path); 
 
    } 
 
    }); 
 
}; 
 
var markers = [{ 
 
    "title": 'Alibaug', 
 
    "lat": '28.4700', 
 
    "lng": '77.0300', 
 
    "description": 'Alibaug is a coastal town and a municipal council in Raigad District in the Konkan region of Maharashtra, India.' 
 
    }, { 
 
    "title": 'Mumbai', 
 
    "lat": '28.6139', 
 
    "lng": '77.2090', 
 
    "description": 'Mumbai formerly Bombay, is the capital city of the Indian state of Maharashtra.' 
 
    }, { 
 
    "title": 'Pune', 
 
    "lat": '28.5700', 
 
    "lng": '77.3200', 
 
    "description": 'Pune is the seventh largest metropolis in India, the second largest in the state of Maharashtra after Mumbai.' 
 
    } 
 

 
];

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="dvMap" style="width: 500px; height: 500px">

来源

2015-07-13 01:05:55 geocodezip

直线是随谷歌地图API路线图

回答

相关问题