AngularJs NgMapで頂点を削除するためにPolygon上でaddListenerを使用するNgMap

Question

AngularJs NgMapを使用してマップ上に描画されたポリゴン上の単一の頂点を削除しようとしていますが、何も起こりません。私はポリゴン上でrightClickイベントをバインドする必要があることを知っていますが、何も起こっていません。

ガイドにはdelete the vertex hereの方法がありますが、私はそのイベントを手続きできません。ここで

は、これまでの私のコードです：

HTML：

<ng-map center="[{{vm.googleMaps}}]" zoom="13" map-type-control="false" street-view-control="false"> 
    <marker position="[{{vm.googleMaps}}]"></marker> 

    <shape name="polygon" paths="{{vm.paths}}" editable="true" 
     stroke-color="#cde" 
     stroke-opacity="0.8" 
     stroke-weight="2" 
     fill-color="#cde" 
     fill-opacity="0.4"> 
    </shape> 
</ng-map> 

コントローラ：

$scope.$on('mapInitialized', function(event, map) { 
    var polygon = new google.maps.Polygon({ 
     paths: vm.polygonPath 
    }); 

    google.maps.event.addListener(polygon, 'rightclick', function() { 
     console.log('RightClick') 
    }); 
}); 

私はポリゴンの頂点を左クリックし、何も起こりませんが、私はできますよポリゴンを完全に編集します。

私は間違っていますか？

Answer 1

mapInitializedを使用せずに適切なイベントを発生させるためには、ng-mapディレクティブ内にカスタムリスナーを設定してそこからイベントを渡す必要がありました。

その後、を使用せずにgoogleMaps機能を使用することができました。

HTML

<ng-map center="[{{vm.googleMaps}}]" zoom="13" map-type-control="false" street-view-control="false"> 
    <marker position="[{{vm.googleMaps}}]"></marker> 

    <shape name="polygon" paths="{{vm.paths}}" editable="true" 
     on-rightclick="vm.myFunction($event)" //This is where we get the event with the point reference 
     stroke-color="#cde" 
     stroke-opacity="0.8" 
     stroke-weight="2" 
     fill-color="#cde" 
     fill-opacity="0.4"> 
    </shape> 
</ng-map> 

AngularJs

私は質問に使用されるコードを使用する必要はありませんので、我々はそれを削除することができます

これは最終的なコードです。

vm.myFunction = function(event) { 
    NgMap.getMap().then(function(evtMap) { 
     var path = evtMap.shapes[0].getPath(); 
     return path.removeAt(event.vertex); 
    }); 
} 

Googleマップの例との唯一の違いは、この方法では小さなボックスを使わずにすぐにポイントを削除することです。