Google Maps API多边形点击事件异常：仅首个多边形可触发点击

嘿，这个问题我太熟了！十有八九是循环创建多边形时的作用域问题导致的——如果你的代码是在循环里批量创建多边形并绑定点击事件，很容易因为变量没有被正确“锁定”，导致后续多边形的事件绑定失效或者指向错误的对象。

先看看你可能踩的坑（常见错误写法） #

假设你是这样批量创建多边形的：

// 错误示例：用var声明循环变量，导致作用域泄漏
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 39.8283, lng: -98.5795} // 示例中心点
  });
  infoWindow = new google.maps.InfoWindow();
  
  var polygonData = [/* 你的多边形路径数据数组 */];
  
  // 问题出在这里的循环！
  for (var i = 0; i < polygonData.length; i++) {
    var polygon = new google.maps.Polygon({
      paths: polygonData[i].paths,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map
    });
    listOfPolygons.push(polygon);
    
    // 绑定点击事件，但这里的i和polygon变量会被循环覆盖
    polygon.addListener('click', function() {
      infoWindow.setContent('你点击了多边形 ' + i);
      infoWindow.open(map, this);
    });
  }
}

为什么只有第一个生效？因为用var声明的i和polygon是函数级作用域，循环结束后所有点击事件引用的都是同一个变量（最后一次循环的值），甚至可能因为Google Maps的事件绑定机制，只有第一个多边形的事件被正确注册，后续的都被覆盖了。

三种可行的修复方案 #

方案1：用ES6的let声明循环变量（最简单）

把循环里的var换成let，利用块级作用域让每个循环迭代都拥有独立的变量：

for (let i = 0; i < polygonData.length; i++) {
  let polygon = new google.maps.Polygon({
    paths: polygonData[i].paths,
    // 其他样式配置
    map: map
  });
  listOfPolygons.push(polygon);
  
  polygon.addListener('click', function() {
    infoWindow.setContent('你点击了多边形 ' + i);
    infoWindow.open(map, this);
  });
}

方案2：用闭包捕获变量（兼容旧浏览器）

如果需要兼容不支持ES6的环境，可以用立即执行函数表达式（IIFE）把每个循环的变量封装起来：

for (var i = 0; i < polygonData.length; i++) {
  var polygon = new google.maps.Polygon({
    paths: polygonData[i].paths,
    // 其他样式配置
    map: map
  });
  listOfPolygons.push(polygon);
  
  // 用IIFE捕获当前的i和polygon
  (function(currentIndex, currentPolygon) {
    currentPolygon.addListener('click', function() {
      infoWindow.setContent('你点击了多边形 ' + currentIndex);
      infoWindow.open(map, currentPolygon);
    });
  })(i, polygon);
}

方案3：用forEach循环遍历数据

数组的forEach方法会给每个迭代创建独立的作用域，自然避免作用域问题：

polygonData.forEach(function(data, index) {
  var polygon = new google.maps.Polygon({
    paths: data.paths,
    // 其他样式配置
    map: map
  });
  listOfPolygons.push(polygon);
  
  polygon.addListener('click', function() {
    infoWindow.setContent('你点击了多边形 ' + index);
    infoWindow.open(map, this);
  });
});

额外检查点 #

如果上面的方案还没解决问题，你可以排查这几点：

• 确保所有多边形都正确添加到了地图上（检查map: map配置有没有写，或者手动调用polygon.setMap(map)）
• 查看多边形是否有重叠，导致下层的多边形无法被点击（可以暂时修改不同多边形的填充颜色/透明度来区分）
• 确认infoWindow实例是全局唯一的，不会被重复创建覆盖

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