Question

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

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

Answer 1

仅发送一个请求。 Google Maps Directions Service supports waypoints如果总分少于10分（使用免费API，使用Google Maps for Business总分25分），您可以使用单个请求，包括来源，目的地和航点，这将减少加载Google服务器并使响应更加一致。

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

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

直线与谷歌地图API中的路线图一起出现

1 个答案: