javascript 关闭所有信息窗口谷歌地图 API V3？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19067027/
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
Close all info windows google maps API V3?
提问by vimes1984
How do i get all info windows to close upon clikcing another pin or clicking the map in itself? I'm using http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.htmland a kml overlay. heres my JS so far:
如何在单击另一个图钉或单击地图本身时关闭所有信息窗口？我正在使用http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html和 kml 覆盖。到目前为止，这是我的 JS：
jQuery(document).ready(function ($) {
function initialize() {
google.maps.visualRefresh = true;
var myLatlng = new google.maps.LatLng(51.201465, -0.30244);
var mapOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var kmlLayer = new google.maps.KmlLayer({
url: 'http://***.com/new/wp-content/themes/required-starter/CGAGolfAcademies.kml?rand=' + (new Date()).valueOf(),
suppressInfoWindows: true,
map: map
});
google.maps.event.addListener(kmlLayer, 'click', function (kmlEvent) {
showInContentWindow(kmlEvent.latLng, kmlEvent.featureData.description);
});
function showInContentWindow(position, text) {
var content = "<div class='info_win'><p>" + text + "</p></div>";
var infowindow =new InfoBox({
content: content,
disableAutoPan: false,
maxWidth: 0,
position: position,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "#FBFBFB"
,opacity: 0.90
,width: "280px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
});
infowindow.open(map);
}
/******AJAX MAP ****/
siteURL = 'http://' + top.location.host.toString();
coachesLinks = jQuery('.info_win a');
coachesLinks.click(function (e) {
e.preventDefault();
});
coachesLinks.click(function (e) {
alert('FRED');
$el = jQuery(this);
URL = $el.attr('href');
shareurl = $el.attr('href');
URL = URL + " .main";
jQuery('#content_two').show('slow').load(URL, function () {
scrollToAnchor('content_two');
$('.main').css('overflow', 'visible');
$('#content_two').css('overflow', 'visible');
jQuery('#content_two .back').on('click', function () {
jQuery(this).hide('slow');
var contentTwo = jQuery('#content_two');
if (contentTwo.is(':hidden')) {
jQuery('#content_two .back').hide();
} else {
contentTwo.hide('slow');
jQuery('#content > .main').show('slow');
jQuery('#content > .main').css('overflow', 'visible');
scrollToAnchor('access');
}
});
});
$('#content > .main').hide('slow');
});
}
google.maps.event.addDomListener(window, 'load', initialize);
});
回答by davidkonrad
As you see in the API docs, an InfoBox has a close()-method.
正如您在API 文档中看到的，InfoBox 有一个close()-method。
Collect all the InfoBox'es you create in an array. Then iterate over this array and call closefor each infobox, when you need to close them all at once.
收集您在数组中创建的所有信息框。然后迭代这个数组并调用close每个信息框，当你需要一次关闭它们时。
In the top, add an array to hold all the infoboxes created
在顶部，添加一个数组来保存所有创建的信息框
jQuery(document).ready(function ($) {
var infoWindows = [];
In function showInContentWindowadd the following right after var infowindow=new.., eg just before infowindow.open
在函数中，showInContentWindow在 之后添加以下内容var infowindow=new..，例如就在之前infowindow.open
//add infowindow to array
infoWindows.push(infowindow);
add this function
添加这个功能
function closeAllInfoWindows() {
for (var i=0;i<infoWindows.length;i++) {
infoWindows[i].close();
}
}
here called by a link
这里通过链接调用
<a href="#" onclick="closeAllInfoWindows();">Close all infowindows</a>
回答by Daniel Mai
You can also keep your active (opened) info window in a higher scope or global variable
您还可以将您的活动（打开）信息窗口保持在更高的范围或全局变量中
var activeInfoWindow;
and in the click event listener, close the active info window (if there's one), then set thisinfo window as active
并在单击事件侦听器中，关闭活动信息窗口（如果有），然后将this信息窗口设置为活动
var infoWindow = new google.maps.InfoWindow({
content: name
});
google.maps.event.addListener(marker, 'click', function() {
activeInfoWindow&&activeInfoWindow.close();
infoWindow.open(map, marker);
activeInfoWindow = infoWindow;
});
回答by AdamJones
In case anyone wants to do this in the context of gmaps3 jQuery wrapper...
如果有人想在 gmaps3 jQuery 包装器的上下文中执行此操作...
var infoWindows = [];
var locations=[
{position:[123,456],content:'<h3>marker title 1</h3><p>msg text</p>/div>'}
]
var map=$('#mapName').gmap3()
.marker(locations)
.infowindow(locations)
.then(function (infowindow) {
var map = this.get(0);
var marker = this.get(1);
marker.forEach(function(item,i){
item.addListener('click', function() {
closeAllInfoWindows();
infowindow[i].open(map, item);
infoWindows.push(infowindow[i]);
});
})
})
.fit();
function closeAllInfoWindows() {
for (var i=0;i<infoWindows.length;i++) {
infoWindows[i].close();
}
}
