Question

我正在尝试使用Google地图的DirectionsService在我传递的任意两个地点之间制作路线。这些地点是动态的。但我遇到的问题是，当接下来的2个坐标到来时，它会删除之前的路线，并显示新路线和新坐标。我也不能使用航点，因为最大。允许8个航路点，我需要更多。这是我的代码：

var marker;
var map;
var mapOptions;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
function initialize() {

  var rendererOptions = {
    map : map,
    suppressMarkers : true
  }
  directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
  mapOptions = {
    zoom: 12,
    center: new google.maps.LatLng(23.53265,77.754812)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
  directionsDisplay.setMap(map);


}
//var image = 'C:\Users\Samir\Desktop\download.jpg';
var start = new google.maps.LatLng(23.32654,77.32685);

function Plot_Data(latlng){

    //end = new google.maps.LatLng(lat,lng);
    marker = new google.maps.Marker({
    position: latlng ,
    map: map

    });

    var request = {
      origin:start,
      destination:latlng,
      travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });

   start = latlng;


}

Answer 1

directionsRenderer一次只显示一条路线。这将为您每次调用Plot_Data函数添加一个新的，但仍将受API速率和查询限制的约束：

var marker;
var map;
var mapOptions;
var directionsDisplay = [];
var directionsService = new google.maps.DirectionsService();
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
function initialize() {

  var rendererOptions = {
    map : map,
    suppressMarkers : true
  }
  directionsDisplay.push(new google.maps.DirectionsRenderer(rendererOptions));
  mapOptions = {
    zoom: 12,
    center: new google.maps.LatLng(23.53265,77.754812)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
  directionsDisplay.setMap(map);
}
//var image = 'C:\Users\Samir\Desktop\download.jpg';
var start = new google.maps.LatLng(23.32654,77.32685);

function Plot_Data(latlng){

    //end = new google.maps.LatLng(lat,lng);
    marker = new google.maps.Marker({
    position: latlng ,
    map: map

    });

    var request = {
      origin:start,
      destination:latlng,
      travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay[directionsDisplay.length-1].setDirections(response);
      directionsDisplay[directionsDisplay.length-1].setMap(map);
      directionsDisplay.push(new google.maps.DirectionsRenderer(rendererOptions));
    } else alert("directions request failed: " +status);
  });
   start = latlng;
}

DirectionsService无法按代码要求运行

1 个答案: