AngularJS ui-gmap-google-map rimuovere il percorso di guida

Utilizzo di AngularJS e della direttiva ui-gmap-google-map (http://angular-ui.github.io/angular-google-maps/#!/) Ho creato una mappa di google che traccia il percorso da guidare. Quando provo a tracciare un percorso diverso, il primo percorso rimane sulla mappa. Ho provato directionsDisplay.setMap (null); rimuovere il vecchio percorso, ma questo non funziona. Qualcuno può aiutare?AngularJS ui-gmap-google-map rimuovere il percorso di guida

Qui è la parte rilevante del mio codice di controllo:

uiGmapIsReady.promise().then(function (map_instances) { 
       $scope.mapRef = $scope.map.control.getGMap(); 
      }); 

$scope.getDirections = function (lat, long, origin, type) { 
      uiGmapGoogleMapApi.then(function (maps) { 
       var directionsService = new maps.DirectionsService(); 
       var directionsDisplay = new maps.DirectionsRenderer(); 

       if (origin == "" || type == "geo") { 
        origin = $scope.geoPosition.coords.latitude + ", " + $scope.geoPosition.coords.longitude; 
       } 

       var request = { 
        origin: origin, 
        destination: lat + ", " + long, 
        travelMode: maps.TravelMode['DRIVING'], 
        optimizeWaypoints: true 
       }; 

       directionsService.route(request, function (response, status) { 
        if (status === google.maps.DirectionsStatus.OK) { 
         directionsDisplay.setMap(null); 
         directionsDisplay.setMap($scope.mapRef); 
         directionsDisplay.setDirections(response); 

        } else { 
         console.log('Directions request failed due to ' + status); 
        } 
       }); 


      }); 
     }

fonte

2015-08-28 user1024941

Il problema è che puoi chiamare map.remove() o rimuovere un livello specifico in cui il percorso viene visualizzato normalmente quando console.log hai $ scope.mapRef ci dovrebbero essere i layer in là – stackg91

Non verrà map.remove ottenere liberare l'intera mappa? Puoi dirmi il modo migliore per rimuovere il percorso esistente? – user1024941

prova che directionsDisplay.setMap (null); o directionsService.setMap (null) – stackg91

Il problema che si ha è che si continua a creare var directionsDisplay = new maps.DirectionsRenderer(); ogni volta che si ottiene una nuova direzione. Invece quello che dovresti fare è creare quella variabile quando avvii il Controller e poi lo aggiorni in seguito. Ho creato un plunker demo

Si può vedere se questo aggiornamento per il vostro codice aiuta

uiGmapIsReady.promise().then(function (map_instances) { 
    $scope.mapRef = $scope.map.control.getGMap(); 
    uiGmapGoogleMapApi.then(function (maps) { 
     $scope.directionsDisplay = new maps.DirectionsRenderer(); 
    }); 
}); 

$scope.getDirections = function (lat, long, origin, type) { 
    uiGmapGoogleMapApi.then(function (maps) { 
     var directionsService = new maps.DirectionsService(); 

     if (origin == "" || type == "geo") { 
      origin = $scope.geoPosition.coords.latitude + ", " + $scope.geoPosition.coords.longitude; 
     } 

     var request = { 
      origin: origin, 
      destination: lat + ", " + long, 
      travelMode: maps.TravelMode['DRIVING'], 
      optimizeWaypoints: true 
     }; 

     directionsService.route(request, function (response, status) { 
      if (status === google.maps.DirectionsStatus.OK) { 
       $scope.directionsDisplay.setMap(null); 
       $scope.directionsDisplay.setMap($scope.mapRef); 
       $scope.directionsDisplay.setDirections(response); 

      } else { 
       console.log('Directions request failed due to ' + status); 
      } 
     }); 


    }); 
}

Spero che questo aiuti !!!

fonte

2015-09-08 18:22:50 jjbskir

So che si sta lavorando con ui-map, ma con ngmap, voi potrebbero avere meno problemi

Il seguente è ad esempio con ngmap mostra due direzioni e puoi spostarlo per mostrare e nascondere le direzioni.

http://plnkr.co/edit/Sv9Q4A?p=preview

<!doctype html> 
<html ng-app="ngMap"> 
    <head> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=weather,visualization,panoramio"></script> 
<script src="http://code.angularjs.org/1.2.25/angular.js"></script> 
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script> 
<script> 
angular.module('ngMap').controller('MyCtrl', function($scope){ 
    var vm = this; 
    vm.toggle = function() { 
    vm.show = !vm.show; 
    $scope.map.directionsRenderers.d1.setMap(vm.show ? $scope.map : null); 
    } 
}) 
</script> 
<link rel="stylesheet" href="style.css"/> 
    </head> 
    <body ng-controller='MyCtrl as vm'> 
    <map zoom="14" center="37.7699298, -122.4469157"> 
     <directions id="d1" origin="toronto" destination="markham"></directions> 
     <directions id="d2" origin="etobicoke" destination="vaughn, on"></directions> 
    </map> 
    <a href="" ng-click="vm.toggle()">show/hide direction</a> 
    </body> 
</html>

Btw, io sono il creatore di ngMap.

fonte

2015-09-04 00:25:51 allenhwkim

Grazie, ma ho già trascorso abbastanza tempo con la mappa esistente e ho tutto funzionante tranne la possibilità di rimuovere un percorso di guida. – user1024941

nessun problema, volevo solo condividere altri modi per farlo. – allenhwkim

AngularJS ui-gmap-google-map rimuovere il percorso di guida

risposta

Problemi correlati