谷歌地图多边形大小调整事件

Question

我有一个可编辑的多边形，就像这里一样。

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

这种可能吗？

编辑

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 对象，但没有效果。

临时解决方案

在多边形调整大小时，无法访问多边形 ghost，因此实现吸附的唯一解决方案是在多边形调整大小后进行。

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
});

- Catalin

Answer 1

扩展@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
    }
});

- Erica Tripp

---

这是一个不错的方法，但对于可编辑的多边形来说会失败，因为可编辑的多边形将显示由地图本身添加的多个其他顶点，并且多边形对象将不会在其路径内包含这些顶点。在这里，我画了三个点 https://prnt.sc/qkbay8 ，而这些点是由谷歌地图添加的 https://prnt.sc/qkbb76。 - Jamshaid K.

Answer 2

实际上，传递给set_at事件处理程序的参数是(index, object)。索引将对应于修改的顶点。

- Andrew Kirkegaard

Answer 3

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

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

PolygonMouseEvent 对象有三个属性：edge、path 和 vertex。如果事件发生在 vertex 上，则会得到其索引，否则为 undefined。

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

• 监听 mousedown 事件。如果定义了 vertex，则设置 dragging = true。
• 监听 mouseup 事件。设置 dragging = false
• 监听 mousemove 事件。如果 dragging = true，则获取鼠标位置 e.latLng 并执行捕捉逻辑。

我没有尝试过，但通过一些调整，您应该可以使用此方法使其正常工作。

如果 mousemove 不起作用，请尝试使用 mouseover。

如果您尝试过仍然无法正常工作，请发布您的代码以便我们提供帮助。

- Seain Malkin

---

谢谢！我会尝试并发送反馈。 - Catalin

Answer 4

我已经解决了一个类似的问题，结合了Seain Malkin提出的解决方案和这里建议的解决方案（感谢两位）。

我没有在polygon上注册"google事件监听器"来监听mousemove，而是在地图的div上注册了DOM事件监听器（将useCapture参数设置为true，特别是为了与Firefox一起使用）：

map.getDiv().addEventListener('mousemove', function (e) {
    if (drawing) {
        var latLng = getLatLngByOffset( map, e.clientX, e.clientY );
        // dragging
    }
}, true);

- m1k4

Answer 5

我认为正确的答案是这个：

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

一个完整的例子在这里：Google文档示例。

- Lorenzo Fiamingo