2

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

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

可能吗？

编辑

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

5 回答 5

1

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

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

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

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

  • 监听mousedown事件。如果vertex已定义，则dragging = true。
  • 监听mouseup事件。放dragging = false
  • 监听mousemove事件。如果dragging = true然后获取鼠标位置。e.latLng并按照你的逻辑来捕捉它。

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

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

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

于 2013-01-27T19:14:12.700 回答
1

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

于 2013-04-07T22:15:27.513 回答
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
    }
});
于 2016-03-23T07:28:05.010 回答
0

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

我没有为mousemove to 注册一个“谷歌事件监听器”，而是为地图注册了一个 DOM 事件监听器（参数设置为，尤其是与 Firefox 一起使用）：polygondivuseCapturetrue

map.getDiv().addEventListener('mousemove', function (e) {
    if (drawing) {
        var latLng = getLatLngByOffset( map, e.clientX, e.clientY );
        // dragging
    }
}, true);
于 2013-04-17T09:45:18.050 回答
0

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

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

一个完整的例子在这里：谷歌文档示例

于 2020-04-15T19:07:11.010 回答