javascript 谷歌地图信息窗口关闭不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22183864/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
google maps infowindow close not working
提问by ak85
I have a google map contained in this fiddle
我有一个包含在这个小提琴中的谷歌地图
When you click on the pins they popup some information as expected and when you click on the x it closes the infowindow.
当您单击引脚时，它们会按预期弹出一些信息，当您单击 x 时，它会关闭信息窗口。
However when I click on the first pin, then click on additional pins (without clicking the x) the infowindows just keep poping up without removing the other ones. how can I restructre my code to get this working?
但是，当我单击第一个引脚，然后单击其他引脚（不单击 x）时，信息窗口会不断弹出而不会删除其他引脚。如何重构我的代码以使其正常工作？
Html
html
<div id="map_canvas"></div>
Style
风格
#map_canvas {
float: left;
height: 565px;
width: 100%;
}
#content {
min-width: 320px;
}
JS
JS
var mylatlongs = [
{"rank":1,"name":"name 1","lat":"-25.901820984476252","lng":"135"},
{"rank":2,"name":"name 2","lat":"-25.901820984476252","lng":"135.05"},
{"rank":3,"name":"name 3","lat":"-25.901820984476252","lng":"135.025"}
];
var infowindow = null;
jQuery(function() {
var StartLatLng = new google.maps.LatLng(mylatlongs[0]['lat'], mylatlongs[0]['lng']);
var mapOptions = {
center: StartLatLng,
streetViewControl: false,
panControl: false,
maxZoom:17,
zoom : 13,
zoomControl:true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL
}
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
jQuery.each( mylatlongs, function(i, m) {
var StartLatLng = new google.maps.LatLng(-25.901820984476252, 134.00135040279997);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(m.lat, m.lng),
bounds: true,
id : 'mk_' + m.rank,
letter : m.index,
map: map,
title: m.name
});
google.maps.event.addListener(marker, 'click', function() {
if (infowindow) {
infowindow.close();
}
infowindow.open(map,marker);
position: new google.maps.LatLng(m.lat, m.lng);
});
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">'+ m.name + '</h1>'+
'<div id="bodyContent">'+ (m.rank) +
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
});
});
回答by Guffa
You have one info window for each marker, and one local variable for each one. When you try to close the previosuly opened info window, you are closing the one that belongs to the clicked marker instead.
每个标记都有一个信息窗口，每个标记都有一个局部变量。当您尝试关闭先前打开的信息窗口时，您正在关闭属于单击标记的信息窗口。
Create a single info window outside of the loop, and set the content of it in the click event so that it gets updated for the marker where you show it:
在循环之外创建一个信息窗口，并在点击事件中设置它的内容，以便它针对您显示它的标记进行更新：
var infowindow = new google.maps.InfoWindow({
content: ''
});
jQuery.each( mylatlongs, function(i, m) {
var StartLatLng = new google.maps.LatLng(-25.901820984476252, 134.00135040279997);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(m.lat, m.lng),
bounds: true,
id : 'mk_' + m.rank,
letter : m.index,
map: map,
title: m.name
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">'+ m.name + '</h1>'+
'<div id="bodyContent">'+ (m.rank) +
'</div>'+
'</div>';
});
回答by user1724001
google.maps.event.addListener(marker, 'click', function() {
if(marker.open){
infowindow.close();
marker.open = false;
}
else{
infowindow.open(map,marker);
marker.open = true;
}
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
marker.open = false;
});
});
回答by Namah
This is stated by google themselves. By creating the InfoWindow outside the event handler, we ensure that there only exists one InfoWindow at a time. If we had put the code for creating the InfoWindow inside the event handler we would have created a new InfoWindow each time the marker was clicked. Leaving us with several identical InfoWindows on top of each other.
这是谷歌自己声明的。通过在事件处理程序之外创建 InfoWindow，我们确保一次只存在一个 InfoWindow。如果我们将用于创建 InfoWindow 的代码放在事件处理程序中，我们将在每次单击标记时创建一个新的 InfoWindow。给我们留下了几个相同的 InfoWindows 在彼此之上。
This means if you declare infoWindow inside of the event handler like:
这意味着如果您在事件处理程序中声明 infoWindow，例如：
google.maps.event.addListener(marker, "click", function (e){
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(props.content);
infoWindow.open(map,marker);
});
Then the infoWindows will keep popping up as you click on the markers
然后，当您单击标记时，infoWindows 将不断弹出
However if they the infoWindow is global like:
但是，如果他们的 infoWindow 是全局的，例如：
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, "click", function (e){
infoWindow.setContent(props.content);
infoWindow.open(map,marker);
});
OR
或者
var infoWindow;
google.maps.event.addListener(marker, "click", function (e){
infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(props.content);
infoWindow.open(map,marker);
});
Then you will have only one InfoWindow Popping up
然后你只会弹出一个 InfoWindow
