多边形坐标变更/编辑/移动事件（Google Maps V3）

Question

自从Google地图v3.11以来，可以将draggable属性设置到Polygon、Circle和Rectangle上。例如：new google.maps.Polygon({ draggable: true })。

对于Circle和Rectangle，我们可以订阅像radius_changed、center_changed和bounds_changed这样的事件，以便在任何更改时进行响应。

但是对于Polygon，我们只能订阅polygon.getPath()的set_at、insert_at和remove_at事件。

因此，在我拖动多边形后，多边形的位置已经被更改/编辑/移动，但没有事件可用来监听这些更改，这会带来问题。

- Timeless

---

geocodezip，你的示例非常好（http://www.geocodezip.com/v3_GoogleEx_polygon-simple_draggableEditable.html）；一个评论是Google地图多边形是自我封闭的，所以现在示例的工作方式，你的三角形有四个顶点;-) ，但这与问题无关。 - Robert Monfera

Answer 1

如果您想监听路径位置和路径新点的更改，有更好的方法来实现此目的，以下是代码：

place_polygon = new google.maps.Polygon({/*...*/});
var place_polygon_path = place_polygon.getPath()
google.maps.event.addListener(place_polygon_path, 'set_at', polygonChanged);
google.maps.event.addListener(place_polygon_path, 'insert_at', polygonChanged);

function polygonChanged(){
    console.log('Changed');
}

- Rodrigo Polo

Answer 2

“dragend”事件怎么样？

对我有效。

- geocodezip

---

谢谢！我甚至不知道多边形还有 dragstart、drag 和 dragend。 - Timeless

也许你需要再次将它们添加到多边形中？ - geocodezip

是的，我再次添加了监听器来解决问题。但是不太确定为什么拖动后监听器停止工作，也许是多边形内部的路径对象已经改变了？ - Timeless

这似乎不在官方文档中，我们是否期望这些事件继续可用？ - chrismarx

@chrismarx 它们已经有文档了，只是有点难找：https://developers.google.com/maps/documentation/javascript/shapes#dragging_events - user879121

Answer 3

如上面的答案所提到的，我们可以使用dragstart / dragend事件来获取拖动过程中的初始和最后位置，然后更新多边形路径坐标（polygonPath）。

我们可以像这样做：

let posInit: ILatLng;
let posLast: ILatLng;

this.area.addListener('dragstart', (event) => {
  posInit = event.latLng.toJSON();
});
this.area.addListener('dragend', (event) => {
  posLast = event.latLng.toJSON();
  polygonPath.forEach((p) => {
    p.lat += posLast.lat - posInit.lat;
    p.lng += posLast.lng - posInit.lng;
  });
});

- Daniel T.