Googleマップのポリゴンを変更した後のイベントapi v3

Question

私は描画マネージャを使用するマッピングアプリケーションを作成しました（そして選択可能なシェイプを実装しています）。プログラムは次のように動作します。ボタンをクリックした後にポリゴンを描画するとパスがポリゴンにマップされます。

このプロセスの後にポリゴンを編集すると、マッピング関数を再度呼び出す必要があります。しかし、私はこの部分を働かせることはできません。

私は次のコードを使用しようとしましたが、このリスナーが追加されたときにまだ形状が選択されていないため、常にエラーが発生します。私に何ができる？

google.maps.event.addListener(selectedShape, 'set_at', function() { 
    console.log("test"); 
}); 

google.maps.event.addListener(selectedShape, 'insert_at', function() { 
    console.log("test"); 
}); 

コードの

重要な部分：

function showDrawingManager(){ 
    var managerOptions = { 
     drawingControl: true, 
     drawingControlOptions: { 
      position: google.maps.ControlPosition.TOP_CENTER, 
      drawingModes: [google.maps.drawing.OverlayType.MARKER,google.maps.drawing.OverlayType.POLYLINE,google.maps.drawing.OverlayType.POLYGON] 
     }, 
     markerOptions: { 
      editable: true, 
      icon : '/largeTDGreenIcons/blank.png' 
     }, 
     polygonOptions: { 
      fillColor:"#1E90FF", 
      strokeColor:"#1E90FF", 
     }, 
     polylineOptions: { 
      strokeColor:"#FF273A" 
     } 
    } 

    var drawingManager = new google.maps.drawing.DrawingManager(managerOptions); 
    drawingManager.setMap(map); 
    return drawingManager; 
} 

    function clearSelection() { 
     if (selectedShape) { 
      console.log("clearSelection"); 

      selectedShape.setEditable(false); 
      selectedShape = null; 
      numberOfShapes--; 
     } 
} 

function setSelection(shape) { 
     console.log("setSelection"); 

    clearSelection(); 
    selectedShape = shape; 
    shape.setEditable(true); 
     numberOfShapes++; 
     //getInformation(shape); 
} 

function initialize(){ 
//.... 
var drawingManager = showDrawingManager(); 
     google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) { 
      if (e.type != google.maps.drawing.OverlayType.MARKER) { 
      // Switch back to non-drawing mode after drawing a shape. 
      drawingManager.setDrawingMode(null); 

      // Add an event listener that selects the newly-drawn shape when the user 
      // mouses down on it. 
      var newShape = e.overlay; 
      newShape.type = e.type; 
      google.maps.event.addListener(newShape, 'click', function() { 
       setSelection(newShape); 
      }); 
      setSelection(newShape); 
      } 
     }); 

Answer 1

を私は.getPath（）を呼び出すと形状がクリックされるたびに呼び出されるリスナー内でリスナーを置くことによってそれを解決しました。私はGoogleのAPIのドキュメントは、おそらく他の人にも有用かもしれないので、set_atを使用する方法について非常に明確ではないと思う。

// Add an event listener that selects the newly-drawn shape when the user 
    // mouses down on it. 
    var newShape = e.overlay; 
    newShape.type = e.type; 
    google.maps.event.addListener(newShape, 'click', function() { 
     google.maps.event.addListener(newShape.getPath(), 'set_at', function() { 
      console.log("test"); 
     }); 

     google.maps.event.addListener(newShape.getPath(), 'insert_at', function() { 
      console.log("test"); 
     }); 
     setSelection(newShape); 
    }); 

Answer 2

google.maps.event.addListener(yourPolygon.getPath(), 'insert_at', function(index, obj) { 
      //polygon object: yourPolygon 
    }); 
    google.maps.event.addListener(yourPolygon.getPath(), 'set_at', function(index, obj) { 
      //polygon object: yourPolygon 
    }); 

上記のコードは私のために働いています。ここでは、ハイライトされたドット（エッジ）からポリゴンエリアを変更するときにset_atが発生し、強調されたエッジの間にポイントをドラッグするとinsert_atが発生します。 polygoncompleteイベントで使用し、データベースからポリゴンをロードした後に使用しました。

Answer 3

set_atで言及された問題を回避してドラッグするために、図面をドラッグしているときにset_atのイベントブロードキャストを無効にする次のものを追加しました。私は、ポリゴンクラスを拡張するクラスを作成し、このメソッドを追加しました：

ExtDrawingPolygon.prototype.enableCoordinatesChangedEvent = function(){ 
    var me = this, 
     superClass = me.superClass, 
     isBeingDragged = false, 
     triggerCoordinatesChanged = function(){ 
     //broadcast normalized event 
     google.maps.event.trigger(superClass,'coordinates_changed'); 
     }; 

    //if the overlay is being dragged, set_at gets called repeatedly, so either we can debounce that or igore while dragging, ignoring is more efficient 
    google.maps.event.addListener(superClass,'dragstart',function(){ 
    isBeingDragged = true; 
    }); 

    //if the overlay is dragged 
    google.maps.event.addListener(superClass,'dragend',function(){ 
    triggerCoordinatesChanged(); 
    isBeingDragged = false; 
    }); 

    //or vertices are added to any of the possible paths, or deleted 
    var paths = superClass.getPaths(); 
    paths.forEach(function(path,i){ 
    google.maps.event.addListener(path,"insert_at",function(){ 
     triggerCoordinatesChanged(); 
    }); 
    google.maps.event.addListener(path,"set_at",function(){ 
     if(!isBeingDragged){ 
     triggerCoordinatesChanged(); 
     } 
    }); 
    google.maps.event.addListener(path,"remove_at",function(){ 
     triggerCoordinatesChanged(); 
    }); 
    }); 

}; 

それはポリゴン自体に「coordinates_changed」イベントを追加したので、他のコードだけで素敵な、単一、簡略化されevent-

のために聞くことができます

Answer 4

chrismarxさんの投稿によると、typescriptに新しいイベントを使用した例です。未定義の参照に問題があったので、私はスーパークラスを削除し、 "私"への参照を変更する小さな変更を行った。あなたのファイルまたはグローバル・コンフィギュレーション・ファイルの先頭に

などの使用：

declare global { 
    module google.maps { 
     interface Polygon { 
      enableCoordinatesChangedEvent(); 
     } 
    } 
} 

は、その後の拡張を定義します。

google.maps.Polygon.prototype.enableCoordinatesChangedEvent = function() { 
      var me = this, 
      isBeingDragged = false, 
      triggerCoordinatesChanged = function() { 
       //broadcast normalized event 
       google.maps.event.trigger(me, 'coordinates_changed'); 
      }; 

     //if the overlay is being dragged, set_at gets called repeatedly, so either we can debounce that or igore while dragging, ignoring is more efficient 
     google.maps.event.addListener(me, 'dragstart', function() { 
      isBeingDragged = true; 
     }); 

     //if the overlay is dragged 
     google.maps.event.addListener(me, 'dragend', function() { 
      triggerCoordinatesChanged(); 
      isBeingDragged = false; 
     }); 

     //or vertices are added to any of the possible paths, or deleted 
     var paths = me.getPaths(); 
     paths.forEach(function (path, i) { 
      google.maps.event.addListener(path, "insert_at", function() { 
       triggerCoordinatesChanged(); 
      }); 
      google.maps.event.addListener(path, "set_at", function() { 
       if (!isBeingDragged) { 
        triggerCoordinatesChanged(); 
       } 
      }); 
      google.maps.event.addListener(path, "remove_at", function() { 
       triggerCoordinatesChanged(); 
      }); 
     }); 

    }; 

は、最後に拡張子を呼び出して、リスナーを追加します。

google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) { 
     event.overlay.enableCoordinatesChangedEvent(); 

     google.maps.event.addListener(event.overlay, 'coordinates_changed', function (index, obj) { 
      //polygon object: yourPolygon 
      console.log('coordinates_changed'); 
     }); 

    });