地图悬停和点击谷歌地图答案

【问题标题】：Map hover & on click on Google maps地图悬停和点击谷歌地图
【发布时间】：2021-09-06 05:03:24
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript google-maps google-maps-api-3 google-maps-markers

【解决方案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
});

【讨论】：