Question

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


            });
        }

Answer 1

我知道您正在使用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>

顺便说一下，我是ngMap的创建者。

Answer 2

您遇到的问题是您不断创作每次获得新方向时都会var directionsDisplay = new maps.DirectionsRenderer();。相反，你应该做的是在启动Controller时创建该变量，然后在以后更新它。我创建了一个plunker demo

您可以查看代码的此更新是否有帮助

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


    });
}

希望这有帮助!!!

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

2 个答案: