如何在google.map上清除路线?

时间:2017-01-19 18:39:46

标签: javascript angularjs google-maps-api-3

当我加载多条路线时,不会删除上一条路线。 许多人说要将directionsDisplay.setMap设置为null,但这并不起作用。 看起来路线在地图上而不在directionsDisplay上。 这是我的代码不起作用:

NgMap.getMap('mapShop').then(function(map) {
    $scope.googleMaps = map;
    var directionsDisplay = new google.maps.DirectionsRenderer();
    var directionsService = new google.maps.DirectionsService();
                    directionsDisplay.setMap(null);
                    directionsDisplay.setDirections(null);
                    directionsDisplay.setMap($scope.googleMaps);

    // get geolocation for center map and marker
    NavigatorGeolocation.getCurrentPosition().then(function(position) {
        $scope.latitude = $routeParams.latitude;
        $scope.longitude = $routeParams.longitude;
        $scope.urlLocalCard = "http://maps.apple.com/?daddr=" + $routeParams.latitude + "," + $routeParams.longitude + "&saddr=" + position.coords.latitude + "," + position.coords.longitude + "&ll=" + $routeParams.latitude + "," + $routeParams.longitude + "&z=10&t=s";
        var request = {
            origin: position.coords.latitude + ',' + position.coords.longitude,
            destination: $routeParams.latitude + ',' + $routeParams.longitude,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
            if (status === google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            } else {
                alert('Google route unsuccesfull!');
            }
        });
    });

1 个答案:

答案 0 :(得分:1)

因为您通过将后一个变量分配给directionsDisplay的新实例而失去对旧google.maps.DirectionsRenderer的引用。将directionsDisplaydirectionsService移至全局范围。

var directionsDisplay,
    directionsService;

// Update global reference upon Google map loads
function initMap(){

    directionsDisplay = new google.maps.DirectionsRenderer(); 
    directionsService = new google.maps.DirectionsService();

}

NgMap.getMap('mapShop').then(function(map) {

       $scope.googleMaps = map;

       directionsDisplay.setMap(null);
       directionsDisplay.setDirections(null);

       // rest of code       

});