谷歌地图中的单击和鼠标悬停事件相互取消

Question

我正在制作一张包含多个预先存在的多边形的地图。多边形被勾勒出来并用红色填充。

鼠标悬停时，infoWindow 显示多边形的标题，鼠标移出时 infoWindow 消失，这是正确的。

我添加了一个单击事件侦听器，以便在单击时多边形被勾勒出轮廓并用黄色填充以指示“当前”多边形。

mouseout 和 click 事件有两个问题：

1. 如果用户单击第二个多边形，我希望第一个选定的多边形返回到原来的红色填充/轮廓。

2. click 事件侦听器还使 infoWindow 出现在选定的多边形上，但是一旦用户将鼠标悬停或鼠标悬停在另一个多边形上，infoWindow 就会消失，因为它被 mouseout 事件取消。我希望 infoWindow 保持不变，然后我可以为鼠标悬停时出现的任何其他 infoWindows 添加 z-index。

代码：

    var overlay = new google.maps.Polygon({
        paths: verticesArray,
        strokeColor: "#FF0000",
        strokeOpacity: 0.5,
        strokeWeight: 1,
        fillColor: "#FF0000",
        fillOpacity: 0.20,
        position: cent,
        map:map });

    function attachInfoWindow(overlay, number) {
      var infowindow = new google.maps.InfoWindow({ content: siteNames[number]});
      google.maps.event.addListener(overlay, 'mouseover', function() { infowindow.open(map, overlay); });
      google.maps.event.addListener(overlay, 'mouseout', function() { infowindow.close(map, overlay); });
      google.maps.event.addListener(overlay, 'click', function() {
            infowindow.open(map, overlay); 
            this.setOptions({ strokeColor: '#ffd100', fillColor:"#ffd100", fillOpacity:0.5,
      });
    });

我不擅长 javascript，不知道如何解决这些 click 和 mouseout 事件问题。

如果需要更多信息或是否需要澄清，请告诉我。

MTIA。

Answer 1

我会尽力回答你的问题。

1) 您可以做的一件事是有一个名为 selectedPolygon 的全局变量，每次用户按下 Polygon 时，您都会更改先前 selectedPolygon 的颜色，并将变量设置为指向用户刚刚按下的 Polygon。过去这种事情对我来说效果很好。

2) 我很确定没有直接的方法可以说“不要运行 mouseout 事件”。一个解决方案，虽然不是那么漂亮，但可能是有一个全局数组，其中包含您想要保持打开状态的所有信息窗口。然后在 mouseout 事件中运行该数组并检查 infowindow 是否在数组中，如果不是则关闭它。 您必须记住从数组中删除信息窗口并在您不想再显示它们时关闭它们:)

希望这会有所帮助。

编辑

这是一个小例子，我在信息窗口上使用该技术来确保在您尝试打开一个新窗口时关闭一个打开的窗口：

var currentinfowindow = null;

function addeventlistenerinfo(marker, infowindow, i){
        google.maps.event.addListener(marker, 'click', function() {
                if (currentinfowindow)
                    currentinfowindow.close();
                infowindow.open(map,marker);
                currentinfowindow = infowindow;
            });
    }

代码是两个sn-ps，由全局变量currentinfowindow和函数addeventlistenerinfo组成。

该函数只是为您的标记创建一个事件侦听器，您可以为叠加层执行此操作。每当您运行事件时，您都会检查全局变量是否有值，然后执行设置不同多边形颜色的程序。

这是我现在能想到的最好的例子。希望它有助于澄清一点。