AngularJS ui-gmap-google-map刪除駕車路線

使用AngularJS和ui-gmap-google-map指令（http://angular-ui.github.io/angular-google-maps/#!/）我創建了一個Google地圖，繪製了駕車路線。當我嘗試繪製不同的路線時，第一條路線仍然在地圖上。我試過directionsDisplay.setMap（null）;刪除舊路線，但這是行不通的。誰能幫忙？AngularJS ui-gmap-google-map刪除駕車路線

這裏是我的控制器代碼中的相關部分：

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


      }); 
     }

來源

2015-08-28 user1024941

事情是你可以調用map.remove（）或刪除一個特定的層，其中路徑顯示正常當你console.log你$ scope.mapRef那裏應該有圖層 – stackg91

不會map.remove獲取擺脫整個地圖？你能告訴我刪除現有路線的最佳方法嗎？ – user1024941

嘗試directionsDisplay.setMap（null）;或directionsService.setMap（null） – stackg91

您遇到的問題是您每次獲得新方向時都會繼續創建 var directionsDisplay = new maps.DirectionsRenderer();。相反，你應該做的是在你啓動控制器時創建該變量，然後再進行更新。我創建了一個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); 
      } 
     }); 


    }); 
}

希望這有助於！

來源

2015-09-08 18:22:50 jjbskir

我知道你與UI映射工作，但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的創造者。

來源

2015-09-04 00:25:51 allenhwkim

謝謝，但我已經花了足夠的時間與現有的地圖，並且除了能夠刪除駕駛路線之外，所有工作都已經完成。 – user1024941

沒問題，只是想分享其他的方式去做。 – allenhwkim

AngularJS ui-gmap-google-map刪除駕車路線

回答

相關問題