AngularJS ui-gmap-google-map删除行车路线

使用AngularJS和ui-gmap-google-map指令(http://angular-ui.github.io/angular-google-maps/#!/)，我创建了一个绘制路线的google地图。当我试图画一条不同的路线时，第一条路线仍然在地图上。我试过directionsdisplay。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);
                    }
                });

            });
        }

我知道您正在使用ui-map，但是使用ngmap，您可能会遇到更少的问题

下面是ngmap显示两个方向的例子，你可以切换它来显示和隐藏方向。

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

预览

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

问题是你一直在创造var directionsDisplay = new maps.DirectionsRenderer();每次你得到一个新的方向。相反，您应该做的是在初始化Controller时创建该变量，然后稍后更新它。我创建了一个活塞演示

你可以看看这个更新对你的代码是否有帮助

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

    });
}

希望这有帮助!!

相关内容

最新更新

热门标签：