我正在制作一个移动网络应用。
部分应用程序会删除多个标记,可以单击这些标记以打开信息窗口。令人恼火的是,如果你继续使用地图而不承认它们,这些就不会消失,就像iOS地图应用程序一样。
有没有办法设置它,以便在用户点击底层地图时,所有打开的信息窗口都会关闭?
答案 0 :(得分:48)
试试这个:
google.maps.event.addListener(map, "click", function(event) {
infowindow.close();
});
这很简单,应该也可以。
答案 1 :(得分:36)
将侦听器添加到地图的点击事件并在其处理程序中关闭信息框
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();
}
});
我在典型的网站上这样做,但没有看到任何理由不能在移动设备上运行
答案 2 :(得分:7)
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;
});
});
完美运作
答案 3 :(得分:0)
我注意到其他答案存在一些问题。
Marcus Rommel和slawekwin的答案:
单击标记后,将触发地图单击事件。因此,当标记单击打开窗口时,传播到地图的click事件将立即再次关闭窗口。
用户1724001的答案:
每次单击标记时创建一个侦听器也不是一个好主意。这会污染内存。
因此,我只想在第一个答案中添加一些其他信息,以阻止事件传播到地图。如果未单击任何标记,则仅关闭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
});
答案 4 :(得分:0)
对于所有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>