Google Maps API中addListener无法监听地图点击事件求助

问题代码 #

map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 53.3674604, lng: -1.2427984 },
    zoom: 10,
    zoomControl: true,
    mapTypeControl: false,
    fullscreenControl: false,
});

map.addListener('click', () => { console.log("Hello"); })
google.maps.event.addListener(map, 'click', () => { console.log("Hello"); });

问题描述 #

尝试两种方式绑定地图click事件均无响应，但Marker的点击事件、地图center_changed事件可正常触发，求故障原因。

可能的排查方向 #

• 地图容器被遮挡：检查是否有DOM元素（如透明div、自定义浮层）覆盖在#map容器上方，这些元素会拦截点击事件，导致地图无法接收。可通过浏览器开发者工具查看元素层级，或临时给可疑元素添加背景色验证。
• API加载异常：确认Google Maps API脚本是否正确加载，控制台是否有JS错误提示。检查API密钥有效性、加载的API版本是否兼容，过时版本可能存在事件绑定逻辑变化。
• 地图对象作用域错误：若map变量定义在局部作用域（如函数内部），后续事件绑定代码可能无法访问到正确的地图实例。确保map在事件绑定代码的作用域内可访问（比如声明为全局变量，或通过闭包传递）。
• 自定义组件拦截事件：如果地图上添加了自定义覆盖物、控件或InfoWindow，部分组件可能阻止事件冒泡到地图。尝试移除所有自定义组件后测试，逐步定位是哪个组件导致的问题。
• 事件监听被覆盖：排查是否有其他代码调用了google.maps.event.clearListeners(map, 'click')或类似方法，清空了地图的点击事件监听，导致你的绑定失效。

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