Googleマップで描いたポリゴンを取り除く方法

Question

私はng-map指示文を使用してマップを持っていますが、<drawing-manager>もあり、地図上に図形を描くことができます。

は、私はちょうど私のユーザーが地図上の1つのポリゴンを描画できるようにしたい、ここに私のHTMLです：

<div ng-controller="CreateOrderController as vm" map-lazy-load="https://maps.google.com/maps/api/js" 
     map-lazy-load-params="{{googleMapsUrl}}"> 
     <ng-map zoom="4" center="33.134394, 53.664248" 
       map-type-id="ROADMAP"> 
      <drawing-manager 
        on-overlaycomplete="vm.onMapOverlayCompleted()" 
        drawing-control-options="{position: 'TOP_CENTER',drawingModes:['polygon']}" 
        drawingControl="true" 
        drawingMode="null"> 
      </drawing-manager> 
     </ng-map> 
    </div> 

これは私のコントローラです：

var vm = this; 


$scope.googleMapsUrl="https://maps.googleapis.com/maps/api/js?key=myKeyIsHere&sensor=false&libraries=drawing"; 
    NgMap.getMap().then(function(map) { 
     vm.map = map; 
}); 


vm.onMapOverlayCompleted = function(e){ 
    var shapePath=e.overlay.getPath().getArray(); //This returns an array of drawn polygon cordinates 

    //Just for example, here I want to delete the drawn polygon: 
    $scope.deletePolygon(); 
}; 


$scope.deletePolygon = function() { 
    //According to Google's docs: https://developers.google.com/maps/documentation/javascript/examples/polyline-remove 
    vm.map.setMap(null); 
}; 

deletePolygon関数がエラーを返します。

Uncaught TypeError: vm.map.setMap is not a function

マップオブジェクトには、setMap関数、bu t Google docsは、ポリゴンシェイプを削除する方法を教えてくださいsetMap(null)

ポリゴンシェイプを削除/削除する方法はありますか？

Answer 1

overlaycompleteイベントのコールバック関数は、新しく作成されたオブジェクトへの参照、docsに従ってoverlayパラメータを有するタイプgoogle.maps.drawing.OverlayCompleteEventのパラメータを渡されます。あなたはそのオブジェクトの.setMap(null)に電話する必要があります。だからあなたのコードは次のようになります。

vm.onMapOverlayCompleted = function(e){ 
    var shapePath= e.overlay.getPath().getArray(); //This returns an array of drawn polygon cordinates 

    e.overlay.setMap(null); //this will delete any created shape (polygon, polyline, etc) right after it is created. If you want to instead delete it later, just store the reference to overlay and call setMap(null) on it later. 
}; 

Answer 2

はclearMap（これを試してみてください）マップ

 NgMap.getMap({id: 'mapId'}).then(function (map) { 
      $scope.map = map; 
     }).catch(function (map) { 
      console.error('map error: ', map); 
     }); 

     $scope.onMapOverlayCompleted = onMapOverlayCompleted; 
     $scope.clearMap = clearMap; 

     function onMapOverlayCompleted(e) { 
      $scope.map = e; 
     } 

     function clearMap() { 
      if ($scope.map.overlay) { 
       $scope.map.overlay.setMap(null); 
      } 
     }