谷歌地图多边形编辑 - 获取鼠标弹起时的经纬度位置

Question

我正在尝试编写一个简单的捕捉函数，用于在Google Maps v3.9中编辑多边形。

地图上有几个多边形，每次只能使一个多边形可编辑。当一个多边形被设置为可编辑时，我还会添加一个监听器，以便在拖动顶点时触发。

由于google.maps.Polygon没有拖动事件，因此我添加了一个mousedown监听器来检查光标下是否有顶点，如果有，则添加mouseup监听器。这个mouseup监听器内部的代码会针对所有其他多边形的顶点进行检查，并且如果找到匹配项，则更新拖动顶点。

这个方法很有效，但是有一个问题。使用mouseup监听器返回的PolyMouseEvent的latLng属性进行检查。该属性指向在拖动之前顶点的位置，而我找不到引用其新位置的方式。

dragListener = google.maps.event.addListener( poly1, "mousedown", function( dragData ) {

    // if dragging a vertex
    if ( dragData.vertex != null ) {

        // perform snap on mouseup
        snapListener = google.maps.event.addListener( poly1, "mouseup", function( mouseData ) {
            var editingVertex = mouseData.vertex;
            var draggedLatLng = mouseData.latLng;

            // code here to compare draggedLatLng with latLng of editingVertex
            // and perform snap, which seems to work fine as is...
        }
    }
}

- Piggo

---

我也在尝试实现同样的事情，但是我找不到任何解决方案... - Catalin

我写了一个库来解决这个问题。请查看我的答案。 - Jordan Arsenault

Answer 1

多边形是路径的集合，路径是由MVCArrays和LatLng对象组成的。因此，我们可以监听每个多边形中每个路径上的set_at事件，这会告诉我们点已经被移动了。

poly1.getPaths().forEach(function(path, index){
  google.maps.event.addListener(path, 'set_at', function(index, oldLatLng){
    var newLatLng = path.getAt(index);
    // Now you have both the old and new position
  });
});

如果您知道您的多边形永远不会有多个路径（内环），那么您只需执行以下操作：

google.maps.event.addListener(poly1.getPath(), 'set_at', function(index, oldLatLng){
  var newLatLng = path.getAt(index);
});

尽管我推荐第一个，因为您永远不知道可能会潜入具有多条路径的多边形。

- user879121

---

这似乎无法让您在拖动顶点时获取其位置，“set_at”事件仅在将顶点放置在新位置时调用。有人找到了一种在拖动时获取顶点位置的方法吗？ - chrismarx