ngmapを使用してポリゴンを描画する

Question

ngmapを使用してマップにポリゴンを描画しようとしています。

ng-map.min.js:25 Uncaught TypeError: Cannot read property 'onMapOverlayCompleted' of undefined 

私は例の同じコードを使用：this例が表示されているが、私は引き分けを終えたときに、これは私が得ているものですとマップが正しく表示されます。

私の質問：

1 - どのように私はこのエラーを解決することができますか？

2-ユーザにポリゴンフォームのみを描画させたい場合は、drawingModeの値を「ポリゴン」に設定しようとしましたが、他の描画オプション（円...）が常にあります。どのようにポリゴンだけを描画させることができますか？

3描画されたポリゴンをクリアするにはどうすればよいですか？

4-すべての点を配置​​（描画）する動作を検出することは可能ですか？私はポリゴンに線を描くことを意味します。たとえば、少なくとも2点必要です。ユーザーが最初の点を描画してから2番目の点を描画し、その座標を取得したときを検出できますか？

編集

私はng-map.js代わりのng-map.min.js含まれている場合これは私が見る全体のエラーです：

：私は最初の質問を解決し

Uncaught TypeError: Cannot read property 'onMapOverlayCompleted' of undefined 
    at index (http://localhost:8080/bower_components/ngmap/build/scripts/ng-map.js:2690:44) 
    at Array.reduce (native) 
    at Uw.<anonymous> (http://localhost:8080/bower_components/ngmap/build/scripts/ng-map.js:2691:39) 
    at P4._.z.trigger (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:99:121) 
    at P4.<anonymous> (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:37:81) 
    at C4._.z.trigger (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:99:121) 
    at C4.<anonymous> (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:37:81) 
    at Object._.z.trigger (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:99:121) 
    at F4 (https://maps.google.com/maps-api-v3/api/js/28/14/drawing_impl.js:7:70) 
    at G4 (https://maps.google.com/maps-api-v3/api/js/28/14/drawing_impl.js:4:249) 

編集

私の問題はそれでした私はapp.jsでルートを使用していますしたがって、htmlとcontrollerがリンクされています。私は私のHTMLでng-controller="DrawingManagerCtrl as vm"を書いていないため、問題を解決するために、私は var vm = this; vm.onMapOverlayCompletedの代わりに$scope.onMapOverlayCompletedを置きます。それでHTMLに入れてon-overlaycomplete="onMapOverlayCompleted()"と書いてあります。

私が使用しても2番目の質問を解決：

drawing-control-options="{position: 'TOP_CENTER',drawingModes:['polygon']}" 

が、私は他の問題を解決するために、今したいんです。

お願いします。 example you referenced示すように

Answer 1

、overlaycompleteコールバック関数は、最初のパラメータとしてe（イベント）を受信します。このOverlayCompleteEventオブジェクトには、元のGoogle Maps JS APIのdocsを参照してください。ng-mapは、元のAPIのラッパー（具体的には「OverlayCompleteEventオブジェクト仕様」セクション）であるため、描画されたオーバーレイへの参照が含まれています。

これを使用すると、作成したオーバーレイへの参照を取得してから保存してから、.setMap(null)を呼び出してマップから削除することができます。 E.G：その後

$scope.myDrawnOverlays = []; //array where you store drawn overlays 
$scope.onMapOverlayCompleted(e){ 
    ... 
    myDrawnOverlays.push(e.overlay); //store reference to the drawn overlay after it's drawn 
} 
$scope.deleteAllDrawnOverlays(){ 
    for(var i = 0; i < myDrawnOverlays.length; i++){ 
     myDrawnOverlays[i].setMap(null); //remove overlays from map one by one 
    } 
    myDrawnOverlays = []; 
} 

あなたはすべてのオーバーレイを削除したいときはいつでも、単に機能$scope.deleteAllDrawnOverlaysを（あなたがng-clickを使用して、いくつかのボタンにそれを結ぶか、あなたはそれでやりたいことができます）を呼び出します。

これはあなたの例で使用されているgoogle.maps.drawing.DrawingManagerを使用できません。その理由は、描画中にDrawingManagerがマップ上をクリックするイベントをサポートしていないためです（可能なイベントについてはdocs、「DrawingManagerクラス」のセクションを参照）。

新しいAPIリリースでいつでも破損する可能性があるハッキリの回避策を除いて、可能な解決策はポリゴンの描画を自分で実装し、DrawingManagerを使用しないことです。例：SO answer、具体的には（地図上で右クリック）を確認します。彼らはng-mapを使用しませんが、基本的にはng-mapにon-click="mapClickHandler"を追加し、mapClickHandlerの地図をクリックした場所を取得し、そこにマーカーのように点を描いてください。ドットはそれらを線で結ぶ。

これは1つの質問には多すぎますが、おそらくng-mapとGoogle Maps Js Apiの関連セクションをお読みください。