AngularJS ui-gmap-google-map удалить маршрут

Используя AngularJS и директиву ui-gmap-google-map (http://angular-ui.github.io/angular-google-maps/#!/), я создал карту google, которая отображает маршрут на диске. Когда я пытаюсь построить другой маршрут, первый маршрут остается на карте. Я пробовал directionDisplay.setMap(null); для удаления старого маршрута, но это не работает. Может ли кто-нибудь помочь?

Вот соответствующая часть моего кода контроллера:

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);
                    }
                });


            });
        }

Ответ 1

Проблема заключается в том, что вы продолжаете создавать var directionsDisplay = new maps.DirectionsRenderer(); каждый раз, когда вы получаете новое направление. Вместо этого вы должны создать эту переменную, когда вы инициируете контроллер, а затем обновите его позже. Я создал демонстрацию plunker

Вы можете узнать, помогает ли это обновление вашему коду

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);
            }
        });


    });
}

Надеюсь, это поможет!!!

Ответ 2

Я знаю, что вы работаете с ui-map, но с ngmap у вас может быть меньше проблем

Ниже приведен пример с ngmap, показывающим два направления, и вы можете переключать его, чтобы показывать и скрывать направления.

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, я создатель ngMap.