如何在NgMap中移除地图上的Polyline？

我看你在用NgMap模块时遇到了移除地图上polyline的问题，之前尝试把map设为null没生效，这主要是因为获取polyline实例的方式不对，咱们来一步步搞定它：

问题分析 #

你的HTML里给polyline设置了id="foo"，但直接通过$scope.map.shape.foo获取的并不是原生的google.maps.Polyline实例——NgMap对shape做了封装，得用它提供的方法拿到原生实例才能调用setMap(null)。另外你的控制器里还漏了注入NgMap依赖，这也是个容易忽略的小问题。

解决方案步骤 #

1. 修正控制器的依赖注入：确保NgMap被正确注入到控制器中
2. 实现cancelPosition方法：用NgMap的getShape方法获取polyline的原生实例，再调用setMap(null)移除它
3. 可选：清空path数据：如果需要彻底清除渲染数据，同时重置绑定的数组

修正后的代码 #

控制器代码

.controller('mainController', ['$scope', 'NgMap', '$timeout', function ($scope, NgMap, $timeout) { 
  $scope.mapsApiUrl = 'AIzaSyA3ZMA6KlxboXRuA7ItNNSlJp3xcgjaB0M'; 
  $scope.$onInit = onInit; 
  $scope.coords = [33, -7];
  // 假设COORDONNES是你已定义的全局坐标数组
  var COORDONNES = [];

  function onInit() { 
    NgMap.getMap().then(function (mapInstance) { 
      var center = mapInstance.getCenter(); 
      google.maps.event.trigger(mapInstance, 'resize'); 
      mapInstance.setCenter(center); 
      $timeout(function () { 
        $scope.map = mapInstance; 
      }); 
    }); 
  } 

  // 合并原代码中重复定义的changePosition方法
  $scope.changePosition = function () { 
    $scope.array = [ 
      [33.97646076222972, -6.8715220588954935 ], 
      [33.97671877693391, -6.87136649077263], 
      [33.977066873117344, -6.871232380321885], 
      [33.97751172239542, -6.870969523838426] 
    ]; 
  };

  // 实现移除polyline的核心方法
  $scope.cancelPosition = function() {
    // 通过id获取原生的polyline实例
    NgMap.getShape('foo').then(function(polyline) {
      // 从地图上移除polyline
      polyline.setMap(null);
      // 清空绑定的path数组，避免再次触发渲染
      $scope.array = [];
    });
  };

  var i = 0; 
  var show = function (coord){ 
    $scope.coords= [COORDONNES[i].x, COORDONNES[i].y]; 
    i++; 
    if(i==COORDONNES.length ) i=0 ; 
    $scope.$apply(); 
  }; 
  setInterval(show, 1000); 
}]);

HTML代码

<button ng-click="changePosition()">CHANGE {{coords}}</button>
<button ng-click="cancelPosition()">CANCEL</button>
<shape name="polyline" id="foo" path="{{array}}" geodesic="true" stroke-color="#FF0000" stroke-opacity="1.0" stroke-weight="4">
</shape>

额外说明 #

• 如果你之后还想重新显示这个polyline，只需要重新给$scope.array赋值，或者提前保存polyline实例后调用polyline.setMap($scope.map)即可
• 原代码中使用了$timeout但没注入，我已经在控制器依赖里补上了，避免报错

内容的提问来源于stack exchange，提问作者elmehdi