Google Maps多标记点击事件无响应问题求助

先结合你的代码和常见问题，给你几个可以尝试的排查点：

• 检查变量作用域问题
  你在循环里给marker赋值时没有用var/let/const声明，这会让marker变成全局变量。虽然这通常会导致所有点击事件都绑定到最后一个标记上，但也可能引发意外的绑定失效。建议修改循环内的代码：

  let marker = new google.maps.Marker({
    // 你的marker配置
  });
  

• 确认事件监听的绑定时机
  确保addMarkers函数是在Google Maps完全初始化完成后调用的（比如在initMap函数的末尾，或者google.maps.event.addDomListener(window, 'load', initMap)的回调里）。如果map还没就绪就添加标记，可能会导致事件监听无法正确注册。

• 检查自定义Icon的点击区域
  你用了自定义的path作为marker图标，有时候复杂的SVG路径可能会导致点击区域异常。可以尝试临时替换成默认marker图标，测试点击是否生效：

  // 注释掉自定义icon，用默认图标
  // icon: spaceMarker,
  

  如果默认图标能正常触发点击，那可能是自定义path的hitbox有问题，可以尝试添加clickable: true显式声明，或者调整path的坐标确保点击区域覆盖可见图标。

• 验证spaces数据的字段正确性
  注意到你在设置坐标时用了spaces[i].log，通常经度字段是lng，如果这是笔误的话，可能导致marker实际位置和显示位置不符（但你说标记能正常显示，可能你的字段确实叫log，不过还是建议确认一下这个字段的数值是否正确）。

• 仔细检查控制台的隐藏报错
  有时候报错可能被过滤或者在初始化阶段出现，建议打开浏览器控制台的“保留日志”选项，刷新页面后重新操作，看看是否有初始化阶段的报错（比如google.maps未定义，或者map.getBounds()返回null）。

• 测试事件监听的直接绑定
  可以尝试把事件监听的回调直接写在循环里，而不是引用外部函数，看看是否能触发：

  google.maps.event.addListener(marker, 'click', function() {
    console.log("test directly", marker.id);
  });
  

  如果这样能生效，那可能是addClickToMarker函数的作用域或者定义位置有问题。

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