Google Maps AdvancedMarker鼠标悬停监听器失效问题排查

你用的是新版的AdvancedMarkerElement，它和旧版Marker的事件处理逻辑存在差异：Google Maps的google.maps.event.addListener仅支持绑定该组件定义的特定地图事件（比如click），而mouseover这类原生DOM事件需要用标准的addEventListener来绑定。

你原来的代码里用google.maps.event.addListener绑定mouseover是无效的，改成原生DOM事件监听即可解决：

function setMarker(loc,pos){
    pos = { lat: pos['lat'], lng: pos['lng'] }; 
    let marker = new AdvancedMarkerElement({
        map: map,
        position: pos,
        title: loc
    });

    // 改用原生addEventListener绑定mouseover事件
    marker.addEventListener('mouseover', function() {
        console.log('Marker has been moused over.');
    });

    google.maps.event.addListener(marker, 'click', function() {
        map.panTo({ lat: jp[loc]['lat'], lng: jp[loc]['lng']} );
        animZoom(jp[loc]['zoom']);
        $location = loc;
    });
}

补充说明：如果需要监听mouseout这类其他鼠标事件，同样要用marker.addEventListener('mouseout', ...)的方式。这是因为AdvancedMarkerElement基于Web Components实现，它的鼠标悬浮类事件属于原生DOM事件，不通过Google Maps的事件分发系统处理，必须使用标准DOM事件监听方法。

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