Question

当鼠标移开或移出标记时，如何关闭在标记上悬停时打开的弹出窗口？

var icon1 = "imageA.png";
var icon2 = "imageB.png";

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: icon1,
    title: "some marker"
});

google.maps.event.addListener(marker, 'mouseover', function() {
    popup = new Popup(
          new google.maps.LatLng(-33.866, 151.196),
          document.getElementById('content'));
    popup.setMap(map);
    marker.setIcon(icon2);
});
google.maps.event.addListener(marker, 'mouseout', function() {
    // ? close popup
});

或者我需要一个全局解决方案来关闭地图上的所有弹出窗口。

自定义弹出窗口来自https://developers.google.com/maps/documentation/javascript/examples/overlay-popup

Answer 1

您可以看到以下JSFiddle：

https://jsfiddle.net/inussaha/otuz1y5h/10/

点击地图，您将看到弹出窗口被删除。

Popup类扩展了google.maps.OverlayView。因此您拥有从google.maps.OverlayView继承的所有功能。

请参阅以下代码以添加/删除Popup

popup.setMap(null); //this will remove the popup overlay;

//the following will show the popup overlay. (map must be a valid google map object)
popup.setMap(map);

因此您的代码应如下所示：

var icon1 = "imageA.png";
var icon2 = "imageB.png";
var popup = null;

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: icon1,
    title: "some marker"
});

google.maps.event.addListener(marker, 'mouseover', function() {
    popup = new Popup(
          new google.maps.LatLng(-33.866, 151.196),
          document.getElementById('content'));
    popup.setMap(map); // show the popup
    marker.setIcon(icon2);
});

google.maps.event.addListener(marker, 'mouseout', function() {
    popup.setMap(null); // close the popup
});

在mousemove或mouseout上关闭google map弹出窗口

1 个答案: