如何使用 Google Maps API 跟踪对多边形的事件更改

Question

我目前正在为我们正在开发的网站构建“搜索区域”功能。有点像Rightmove上的那个。

除了跟踪对多边形的事件更改（新点的设置和更改现有点）的能力之外，我已经启动并运行了所有内容。我需要能够将坐标发布到表单以供提交。

我已经尝试了editing events 的 Google 代码文档。每次我尝试它时，我都会收到一条消息，说“set_at”是不可能的，或者我的对象没有被定义。

我想我知道的一点是错误的 thePolygon 变量没有被传递给新的

google.maps.event.addListener(thePolygon, 'set_at', function() {
      // grab paths for infoWindow 
      grabPaths(thePath);
    });

但我不知道为什么。这是一个全局变量。还是没有？

那么，问题是，如何跟踪多边形的变化以将更新后的坐标传递给我的表单？

非常感谢所有帮助。

这是我目前拥有的代码：

var mapOptions = {
  // options
};

var map = new google.maps.Map(document.getElementById('map'), mapOptions);

var drawingManager = new google.maps.drawing.DrawingManager({
  drawingMode: google.maps.drawing.OverlayType.POLYGON,
  drawingControl: false,
  polygonOptions: {
    // drawing options
  }
});

drawingManager.setMap(map);
  
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
  // complete functions
});

google.maps.event.addListener(thePolygon, 'set_at', function() {
  // complete functions
});

google.maps.event.addListener(thePolygon, 'insert_at', function() {
  // complete functions
});

Answer 1

这些事件是为 MVCArray 定义的，折线不是 MVCArray。您必须改为观察折线（这是一个 MVCArray）的 path 的事件。此外，您不能向尚未创建的对象添加侦听器。多边形在polygoncomplete之前是不可用的，所以你必须在polygoncomplete-callback里面添加监听器：

google.maps.event.addListener(drawingManager,'polygoncomplete',function(polygon) {

  // complete functions

  google.maps.event.addListener(thePath, 'set_at', function() {
    // complete functions
  });

  google.maps.event.addListener(thePath, 'insert_at', function() {
    // complete functions
  });

});