Google Maps多边形删除功能实现问题：点击删除报undefined错误

首先明确：多边形点击删除功能完全可行，你遇到的undefined错误大概率是因为this指向问题、方法拼写错误，或者没有正确获取到原生Google Maps多边形实例导致的。下面针对你的代码给出具体修复方案：

1. 修正方法拼写错误 #

你的方法名写成了deletePerimter（少了一个e），先把它改成正确的deletePerimeter：

deletePerimeter(polygon) {
  polygon.setMap(null);
}

2. 在polygoncomplete回调中正确绑定点击事件 #

在polygoncomplete的回调函数里，直接给生成的原生多边形添加点击事件，同时要注意绑定Vue实例的this，否则回调里无法访问deletePerimeter方法。可以用箭头函数来保留this指向：

google.maps.event.addListener(vm.drawingManager, 'polygoncomplete', (polygon) => { // 改成箭头函数
 if (polygon.getPath().getLength() < 3) {
 alert('Area need 3 points.');
 polygon.getPath().clear();
 return;
 }
 vm.drawingManager.setOptions({ drawingControl: false, drawingMode: null });
 vm.addressArea = [];
 for (let i = 0; i < polygon.getPath().getLength(); i++) {
 let point = polygon.getPath().getAt(i).toUrlValue(6)
 point = point.split(',');
 vm.addressArea.push({lat: parseFloat(point[0]), lng: parseFloat(point[1])});
 }
 // 添加多边形点击事件，绑定Vue实例的this
 google.maps.event.addListener(polygon, 'click', () => {
   this.deletePerimeter(polygon); // 这里的this现在指向Vue实例
 });
 // 保留原有的路径变化监听
 google.maps.event.addListener(polygon.getPath(), "insert_at", () => {vm.updatePoints(polygon)});
 google.maps.event.addListener(polygon.getPath(), "set_at", () => {vm.updatePoints(polygon)});
 google.maps.event.addListener(polygon.getPath(), "remove_at", () => {vm.updatePoints(polygon)});
 google.maps.event.addListener(polygon.getPath(), "dragend", () => {vm.updatePoints(polygon)});
});

3. 针对<gmap-polygon>组件的点击删除补充（可选） #

如果你是想让通过Vue组件渲染的<gmap-polygon>也支持点击删除，需要注意：组件的ref获取到的是Vue组件实例，不是原生Google Maps多边形对象，要通过$mapObject属性获取原生实例。可以给组件添加@click事件：

<gmap-polygon 
  :paths="addressArea" 
  ref="polygon" 
  v-if="disableArea" 
  :editable="this.editableArea" 
  @paths_changed="updateEdited($event)"
  @click="handlePolygonClick" <!-- 添加点击事件 -->
></gmap-polygon>

然后在Vue方法里实现：

handlePolygonClick() {
  // 获取原生多边形实例
  const polygonInstance = this.$refs.polygon.$mapObject;
  if (polygonInstance) {
    this.deletePerimeter(polygonInstance);
    // 同时清空addressArea，让组件从DOM中移除
    this.addressArea = [];
  }
}

为什么之前会出现undefined错误？ #

• 方法名拼写错误，导致调用不存在的方法
• polygoncomplete的普通函数回调里，this指向的是回调函数自身，不是Vue实例，所以无法访问deletePerimeter方法
• 如果误把Vue组件实例当成原生多边形对象调用setMap，也会出现undefined错误

按照上面的步骤修改后，应该就能正常实现多边形点击删除的功能了。

内容的提问来源于stack exchange，提问作者user14319635