google-maps - 多边形坐标更改/编辑/移动事件（谷歌地图 V3）

Question

由于 Google maps v3.11，可以将draggable属性设置为Polygon,Circle和Rectangle. 例如，new google.maps.Polygon({ draggable: true })。

对于Circle和Rectangle，有 和 之类的事件，radius_changed我们可以在有任何变化时进行订阅。center_changedbounds_changed

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

因此，在我拖动多边形后会出现问题，多边形的位置已更改/编辑/移动，但没有事件监听此更改。

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

Answer 2

“天灾”事件如何？

这对我有用

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