Google maps api 3 谷歌地图多边形调整事件

我有一个可编辑的多边形，就像

我想“捕捉”用户在地图上移动点（调整多边形大小）时发生的事件。我需要这个功能来实现点对点的捕捉

可能吗

编辑

this.polygon = new google.maps.Polygon({
    map: map,
    strokeWeight: 2,
    editable: true,
    path: this._path
});

var dragging = false;
google.maps.event.addListener(this.polygon, 'mousedown', function (event) {
    if (event.vertex) {
        dragging = true;
    }
});
google.maps.event.addListener(this.polygon, 'mousemove', function (event) {
    if (dragging) {
        // dragging
    }
});
google.maps.event.addListener(this.polygon, 'mouseup', function (event) {
    dragging = false;
});

代码正在运行，事件被捕获。但是，我无法访问当前拖动点以更改其位置

我还尝试在

mousemove

事件中更改latLng对象，但没有效果

临时解决方案

调整大小时无法访问多边形重影，因此实现捕捉的唯一解决方案是在调整多边形大小后执行捕捉

this.polygon = new google.maps.Polygon({
    map: map,
    strokeWeight: 2,
    editable: true,
    path: this._path
});

var path = this.polygon.getPath();
google.maps.event.addListener(path, 'set_at', function (event) {
    // Here do the snapping, after the polygon has been resized
});

google.maps.event.addListener(path, 'insert_at', function (event) {
    // Here do the snapping, after the polygon has been resized
});

---

是的，这是可能的，但不是直接的

您需要在多边形对象上使用事件的组合

对象有三个属性，

边

、

路径

和

顶点

。如果事件发生在

顶点

上，您将获得该顶点的索引，否则它是未定义的

因此，如果您尝试以下操作，您可能能够构建所需的功能：

• 收听

  mousedown

  事件。如果定义了

  顶点

  ，则

  拖动=真

• 收听

  mouseup

  事件。设置

  拖动=false

• 收听

  mousemove

  事件。如果拖动=true，则获取鼠标位置

  e.latLng

  并按逻辑将其捕捉

我还没有尝试过这个方法，但是通过一些修补，您应该可以使用这种方法使它工作

如果

mousemove

不起作用，请尝试使用

mouseover

---

如果您尝试一下，但无法使其工作，请发布您的代码，以便我们提供帮助。

实际上，传递给

事件处理程序的
set\u的参数是
（索引，对象）
。索引将对应于修改的顶点
 我已经解决了一个类似的问题，将Seain Malkin建议的解决方案和建议的解决方案放在一起（感谢两者）

我没有将
mousemove
的“谷歌事件监听器”注册到
polygon
中，而是将DOM事件监听器注册到maps
div
（
useCapture
参数设置为
true
，尤其是用于Firefox）：

用代码扩展@SeainMalkin的答案：

var draggingPolygonVertex = false;

google.maps.event.addListener(polygon, 'mousedown', function(mdEvent) {
    if(mdEvent.vertex || (mdEvent.vertex == 0)){
        draggingPolygonVertex = true;
    }
});

google.maps.event.addListener(polygon, 'mouseup', function(muEvent) {
        draggingPolygonVertex = false;
});


google.maps.event.addListener(polygon, 'mousemove', function(mmEvent) {
    if(draggingPolygonVertex){
        // you're now dragging a vertex of the polygon
        // insert snap to grid code
    }
});

我认为正确的答案是：

path.addListener('bounds_changed', function (event) {
    // Here do the snapping, after the polygon has been resized
});

这里有一个完整的例子：
谢谢！我将尝试一下，并发送反馈这是一个很好的方法，但它在可编辑多边形上失败，因为可编辑多边形将显示多个其他顶点，这些顶点将由贴图本身添加，并且多边形对象的路径中不会有这些顶点。在这里，我画了三个点，其他点是由谷歌地图添加的。
path.addListener('bounds_changed', function (event) {
    // Here do the snapping, after the polygon has been resized
});