谷歌地图多边形编辑 - 在鼠标悬停时获取经纬度位置

Pig*_*ggo 5 google-maps-api-3

我正在尝试编写一个简单的捕捉功能,用于在 Google Maps v3.9 中编辑多边形

我在地图上有几个多边形,可以一次编辑一个。当一个可编辑时,我还会向它添加一个侦听器,以在拖动顶点时触发。

由于没有拖动事件google.maps.Polygon,我添加了一个mousedown侦听器,它检查顶点是否在光标下方,如果是,则添加一个mouseup侦听器。此mouseup侦听器中的代码检查所有其他多边形的顶点,并在找到接近匹配的情况下更新拖动顶点。

这很有效,除了一个问题。使用侦听器返回的latLng属性执行检查。此属性指向拖动之前顶点的位置,我找不到在新位置引用顶点的方法。PolyMouseEventmouseup

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...
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

小智 4

多边形是路径的集合,而路径是LatLng对象的MVCArray,因此我们可以侦听多边形中每个路径上的事件,该事件告诉我们点何时移动。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
  });
});
Run Code Online (Sandbox Code Playgroud)

如果您知道您的多边形永远不会有超过一条路径(内环),那么您可以这样做:

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

不过我推荐第一个,因为你永远不知道何时具有多个路径的多边形可能会以某种方式潜入。