地图悬停和点击谷歌地图

Posted 2023-03-28

【中文标题】地图悬停和点击谷歌地图

【英文标题】：Map hover & on click on Google maps

【发布时间】：2021-09-06 05:03:24

【问题描述】：

Google 地图上的地图标记是否可以显示 3/4/5 等，从而使用户放大地图。是否可以添加不会改变点击行为的“悬停”？

想象一下，您将鼠标悬停在地图上的 3 上，当您点击 3 时会弹出一个显示目的地

Google 地图是否支持单独的悬停和点击？

【参考方案1】：

确实如此。首先在地图本身上有mouseover 和mousemove 事件，它们基本上在做同样的事情：

https://developers.google.com/maps/documentation/javascript/reference/map

其次，如果您希望这仅发生在标记上，那么在标记上还有 mouseover 和 mouseout 事件，当用户将鼠标悬停在标记上，然后将光标移出标记时

https://developers.google.com/maps/documentation/javascript/reference/marker

所以你可以做类似的事情

const map = new google.maps.Map(document.getElementById('map'), 
    zoom: 13,
    center: lat: 51.476706, lng: 0,
    mapTypeId: google.maps.MapTypeId.ROADMAP
);

const marker = new google.maps.Marker(
    map: map,
    position: lat: 51.476706, lng: 0
);


marker.addListener('mouseover', function() 
    // open your popup window
);

marker.addListener('mouseout', function() 
    // close your popup window
);