通过单击地图关闭谷歌地图中的信息窗口？
Posted
技术标签:
【中文标题】通过单击地图关闭谷歌地图中的信息窗口？【英文标题】：Closing info windows in google maps by clicking the map? 【发布时间】：2012-04-18 20:31:00 【问题描述】：我正在制作一个移动网络应用程序。
应用程序的一部分会掉落几个标记，单击这些标记可以打开信息窗口。让我恼火的是，如果您继续使用地图而不承认它们，这些不会消失，就像在 ios 地图应用程序中一样。
有没有办法设置它，如果用户点击底层地图，所有打开的信息窗口都会关闭？
【问题讨论】：
【参考方案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，而是创建一个然后根据您单击的标记填充它，因此您不需要使用一些循环来关闭它们。有一种更简单的解决方案。以上是关于通过单击地图关闭谷歌地图中的信息窗口？的主要内容，如果未能解决你的问题，请参考以下文章