通过单击地图关闭谷歌地图中的信息窗口？答案

【问题标题】：Closing info windows in google maps by clicking the map?通过单击地图关闭谷歌地图中的信息窗口？
【发布时间】：2012-04-18 20:31:00
【问题描述】：

我正在制作一个移动网络应用程序。

应用程序的一部分会掉落几个标记，单击这些标记可以打开信息窗口。让我恼火的是，如果您继续使用地图而不承认它们，这些不会消失，就像在 iOS 地图应用程序中一样。

有没有办法设置它，如果用户点击底层地图，所有打开的信息窗口都会关闭？

【问题讨论】：

标签： google-maps-api-3

【解决方案1】：

我对所有 senario 都有更好的解决方案。

试试这个：JSFiddle

const infoWindow = new google.maps.InfoWindow();

function init() {
    const map = new google.maps.Map(document.getElementById('map'), {
        zoom: 6,
        center: new google.maps.LatLng(39.9646, 30.8259),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    });

    map.addListener('click', () => {
        if (infoWindow) {
            infoWindow.close();
        }
    });

    const istanbulMark = new google.maps.Marker({
        position: new google.maps.LatLng(41.0876, 28.9288),
        map: map,
        label: 'I'
    });

    istanbulMark.addListener('click', () => {
        infoWindow.setContent(`
            <h1>Hi mate</h1>
            <hr>
            <p>Welcome to İstanbul!</p>
          `)
        infoWindow.open(map, istanbulMark);
    });

    const ankaraMark = new google.maps.Marker({
        position: new google.maps.LatLng(39.9162, 32.8437),
        map: map,
        label: 'A'
    });

    ankaraMark.addListener('click', () => {
        infoWindow.setContent(`
            <h1>Hi mate</h1>
            <hr>
            <p>Welcome to Ankara!</p>
          `)
        infoWindow.open(map, ankaraMark);
    });
}

google.maps.event.addDomListener(window, 'load', init);

 html, body, #map {
      height: 100%;
      margin: 0px;
      padding: 0px
  }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true">
  </script>
</head>
<body>
  <div id="map"></div>
</body>
</html>

【讨论】：

【解决方案2】：

我注意到其他答案存在一些问题。

马库斯·隆美尔和 slawekwin 的回答：

单击标记时，会触发地图单击事件。所以当marker click打开窗口时，click事件传播到map会立即再次关闭窗口。

user1724001的回答：

每次单击标记时创建一个侦听器也不是一个好主意。这会污染内存。

因此，我只想在第一个答案中添加一些附加信息，以阻止事件传播到地图。只有在没有点击任何标记的情况下，Windows 才会关闭。

marker.addListener("click", function(event) {
    // open your window here
    event.stopPropagation(); // this prevents propagation of marker click to map click
});

map.addListener("click", function() {
    // close your window
});

【讨论】：

这不再起作用了。 marker.addListener("click" 不再获得 event 参数。 stopPropagation 也不再需要了，谷歌地图默认会这样做。
实际上马库斯隆美尔解决方案确实有效。他向“地图”添加了一个侦听器以关闭信息窗口。打开信息窗口的侦听器位于“标记”上。

【解决方案3】：

google.maps.event.addListener(marker, 'click', function() {
    if(!marker.open){
        infoWindow.open(map,marker);
        marker.open = true;
    }
    else{
        infoWindow.close();
        marker.open = false;
    }
    google.maps.event.addListener(map, 'click', function() {
        infoWindow.close();
        marker.open = false;
    });
});

完美运行

【讨论】：

这是唯一对我有用的答案，除了“infowindow”现在是“infoWindow”。
每次打开标记时，此答案都会绑定一个侦听器。添加一些console.log()，你会看到它被越来越多地触发......

【解决方案4】：

试试这个：

google.maps.event.addListener(map, "click", function(event) {
    infowindow.close();
});

这很简单，应该也可以。

【讨论】：

这应该是公认的答案！像魅力一样工作！
是的，我同意上述评论。
值得一提的是，这段代码需要在标记事件侦听器函数google.maps.event.addListener(marker, 'click', function() { 中，因为我花了一些时间试图让它工作而不知道它应该在那里。谢谢。
@tinyCoder 不一定。 infowindow 变量可能是代码中标记单击处理程序的本地变量，但这不是给定的。

【解决方案5】：

为地图的点击事件添加监听器并在其处理程序中关闭信息框

google.maps.event.addListener(map, "click", function(event) {
    for (var i = 0; i < ibArray.length; i++ ) {  //I assume you have your infoboxes in some array
         ibArray[i].close();
    }
});

我在典型的网站上这样做，但看不出有什么理由不能在移动设备上运行

【讨论】：

还有 map.addListener("click", function(event) {... works
此答案不是最佳解决方案，请查看 Marcus Rommel 的答案。您不需要创建多个 infoWindows，而是创建一个然后根据您单击的标记填充它，因此您不需要使用一些循环来关闭它们。有一种更简单的解决方案。