Question

我正在制作一张有多个预先存在的多边形的地图。多边形的轮廓和红色填充。

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

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

鼠标输出和点击事件有两个问题：

如果用户点击第二个多边形，我希望第一个选定的多边形返回到原始的红色填充/轮廓。
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而且不确定如何解决这些点击和鼠标移动事件问题。

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

MTIA。

Answer 1

我会尽力回答你的问题。

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

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

希望这会有所帮助。

修改

这是一个小例子，我在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; }); }

代码是两个片段，由全局变量currentinfowindow和函数addeventlistenerinfo组成。

该功能只是为您的标记创建一个事件监视器，您可以为您的叠加层执行此操作。无论何时运行事件，都要检查全局变量是否有值，然后执行设置不同多边形颜色的rutine。

这是我现在可以提供的最好的例子。希望它有助于澄清一点。

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

1 个答案: