API карт Google, не удается удалить предыдущий маршрут

Question

Ниже приведена функция, которую я использую для генерации маршрута из заданной точки. У меня есть несколько мест, где пользователь может запрашивать маршруты из ... если пользователь запрашивает указания во второй раз, тогда 1-й маршрут все еще отображается на карте, очевидно, это выглядит не очень хорошо. Как его удалить?

base.getRoute = function(start, la, lo) { 

     var directionsService = new google.maps.DirectionsService(); 

     directionsDisplay = new google.maps.DirectionsRenderer(); 
     directionsDisplay.setMap(base.map); 
     directionsDisplay.setPanel(document.getElementById("drivingDirectionsPanel")); 

     start+=",uk"; 
     var end = new google.maps.LatLng(la, lo); 
     var request = { 
       origin: start, 
       destination: end, 
       travelMode: google.maps.DirectionsTravelMode.DRIVING 
     }; 

     directionsService.route(request, function(response,status) { 
      if(status == google.maps.DirectionsStatus.OK) { 


       $('#drivingDirectionsPanel').html(''); 
       directionsDisplay.setDirections(response); 

       $('html, body').animate({ 
         scrollTop: $('#drivingDirectionsPanel').offset().top 
        }, 1500); 

      } else { 
       alert("There was a problem finding directions"); 
      } 
     });   
    }; 

Я попытался добавить

directionsDisplay.setMap(null); 

, но это не работает.

Любые идеи парней? Спасибо

Answer 1

Сделать маршрут отображением «класс» или глобальной переменной, чтобы он очистил панель, когда она отображает ответные действия.

Answer 2

Вот как я это сделал:

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
$.extend(map,{ 
    pv: { 
     markerArray: [], 
     areaCircle: null, 
     userLocation: { 
      latitude: 38.68551, 
      longitude: -98.789062 
     }, 
     removeAllMarkers: function(){ 
      for (var i = 0; i < this.markerArray.length; i++) { 
       if (this.markerArray[i].directions) this.markerArray[i].directions.setMap(null); 
       this.markerArray[i].setMap(null); 
      } 
     }, 
     removeAllDirections: function(){ 
      for (var i = 0; i < this.markerArray.length; i++) { 
       if (this.markerArray[i].directions) this.markerArray[i].directions.setMap(null); 
      } 
     }, 
     geocoder: new google.maps.Geocoder(), 
     directions: new google.maps.DirectionsService(), 
     directionPanel: document.getElementById('directions'), 
     center: null 
    } 
}); 

Теперь в любое время я добавить маркер, я добавить ссылку на него внутри markerArray, а затем, когда я хочу, чтобы удалить все направления или все маркеры, я просто позвонить map.pv.removeAllDirections() или map.pv.removeAllMarkers()

Answer 3

directionsDisplay.setMap(null); 
map.setZoom(8); 
map.setCenter(); 

Answer 4

я получил эту работу, используя комбинацию решений, предложенных выше. Таким образом, «directionDisplay» должен быть глобальным, а затем directionDisplay.setMap (null) нужно вызвать до того, как вы создадите directionDisplay в другой раз, и он очистит предыдущий маршрут от карты.

Вот код:

if(directionsDisplay != undefined) 
     directionsDisplay.setMap(null); 

    directionsService = new google.maps.DirectionsService(); 
    directionsDisplay = new google.maps.DirectionsRenderer({preserveViewport:true}); 
    directionsDisplay.setMap(map); 
    directionsDisplay.setPanel(document.getElementById('dvDirResults')); 

    directionsService.route(request, function (response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      $('#<%= lblGetDirError.ClientID %>').hide(); 
      $('#dvDirResults').html(""); 
      directionsDisplay.setDirections(response); 
      map.panToBounds(response.routes[0].bounds); 
      map.setCenter(response.routes[0].bounds.getCenter()); 
      //map.fitBounds(response.routes[0].bounds); 
      if(map.getZoom() < 10) map.setZoom(10); 
     } 
     else 
      $('#<%= lblGetDirError.ClientID %>').show(); 
    });