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

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

你遇到的问题是， 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);
            }
        });


    });
}

希望这可以帮助！！！