如何使用Google Maps API跟踪多边形的事件变化

Question

我正在为一个我们正在开发的网站构建“搜索区域”功能，类似于Rightmove上的功能。

除了跟踪多边形事件变化（设置新点和更改现有点）的能力外，我已经完成了一切。我需要将坐标发布到表单以进行提交。

我尝试了Google Code文档中的editing events，但每次尝试时，要么得到关于“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
});

- Jonny Haynes

Answer 1

这些事件是为MVCArray定义的，而折线不是MVCArray。您必须观察折线的path（它是MVCArray）的事件。此外，您不能向尚未创建的对象添加侦听器。在polygoncomplete之前多边形不可用，因此必须在polygoncomplete回调中添加侦听器：

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

});

- Dr.Molle

---

哈哈，太棒了。我离成功很近，但又很遥远。感谢您的帮助，非常感激。我无法理解的是获取路径更改的部分。然而，它是如此简单。 - Jonny Haynes

请参见https://dev59.com/Zmcs5IYBdhLWcg3w3Hun。 - jjwdesign

请使用 polygon.getPath() 替代 thePath。 - Raza Ahmed

这对于具有多个路径的多边形无效。请参见https://dev59.com/wmIi5IYBdhLWcg3w9gNy - user879121

我如何在set_at和insert_at事件监听器中调用类级别的函数和变量？ - Salil Luley