Question

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

我想＆＃34;赶上＆＃34;用户在地图周围移动点（调整多边形大小）时的事件。我需要此功能来实现对齐。

有可能吗？

修改

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

临时解决方案

在调整大小时，您无法访问Polygon 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
});

Answer 1

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

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

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

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

收听mousedown事件。如果定义了vertex，则dragging = true。
收听mouseup事件。设置dragging = false
收听mousemove事件。如果dragging = true则获得鼠标位置。 e.latLng并按照你的逻辑捕捉它。

我没有尝试过这个，但是通过一些修补，你应该使用这种方法。

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

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

Answer 2

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

Answer 3

我已经解决了类似的问题，将Seain Malkin建议的解决方案放在一起，解决方案建议here（感谢两者）。

我没有为mousemove注册“google事件监听器”，而是polygon我已经为地图div注册了一个DOM事件监听器（useCapture参数设置为{ {1}}，尤其是与Firefox合作）：

true

Answer 4

使用代码扩展@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
    }
});

Answer 5

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

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

完整的示例在这里：Google Doc example

Google Maps Polygon调整大小事件

5 个答案: