google-maps-api-3 - Google map 多边形调整事件

Question

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

我想在用户围绕 map 移动点(以调整多边形的大小)时“捕获”事件。我需要此功能来实现对齐点。

这可能吗？

编辑

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

Answer 1

是的，这是可能的，但不是直截了当的。

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

A PolygonMouseEvent对象具有三个属性，edge、path 和 vertex。如果事件发生在 vertex 上，您将获得它的索引，否则它是未定义的。

因此，如果您尝试以下操作，您也许能够构建您想要的功能:

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

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

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

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