我只需要在Google地图上打开一个InfoWindow。打开新的InfoWindows之前,需要关闭所有其他InfoWindows。
有人可以告诉我该怎么做吗?
Answers:
您只需要创建一个InfoWindow
对象,保留对其的引用,然后对所有标记重复使用。引用Google Maps API文档:
如果您一次只希望显示一个信息窗口(如Google Maps上的行为),则只需创建一个信息窗口,您可以在地图事件(例如用户点击)时将其重新分配到其他位置或标记。
因此,您可能InfoWindow
只想在初始化地图后立即创建对象,然后click
按如下方式处理标记的事件处理程序。假设您有一个标记someMarker
:
google.maps.event.addListener(someMarker, 'click', function() {
infowindow.setContent('Hello World');
infowindow.open(map, this);
});
然后,InfoWindow
当您单击新的标记而无需调用该close()
方法时,会自动关闭。
在范围之外创建您的信息窗口,以便您可以共享它。
这是一个简单的示例:
var markers = [AnArrayOfMarkers];
var infowindow = new google.maps.InfoWindow();
for (var i = 0, marker; marker = markers[i]; i++) {
google.maps.event.addListener(marker, 'click', function(e) {
infowindow.setContent('Marker position: ' + this.getPosition());
infowindow.open(map, this);
});
}
我有同样的问题,但是最好的答案并不能完全解决它,我在for语句中要做的就是使用与此当前标记相关的this。也许这可以帮助某人。
for(var i = 0; i < markers.length; i++){
name = markers[i].getAttribute("name");
address = markers[i].getAttribute("address");
point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
contentString = '<div style="font-family: Lucida Grande, Arial, sans-serif;>'+'<div><b>'+ name +'</b></div>'+'<div>'+ address +'</div>';
marker = new google.maps.Marker({
map: map,
position: point,
title: name+" "+address,
buborek: contentString
});
google.maps.event.addListener(marker, 'click', function(){
infowindow.setContent(this.buborek);
infowindow.open(map,this);
});
marker.setMap(map);
}
有点晚,但是我通过maken infowindow全局变量只打开了一个infowindow。
var infowindow = new google.maps.InfoWindow({});
然后在列表器中
infowindow.close();
infowindow = new google.maps.InfoWindow({
content: '<h1>'+arrondissement+'</h1>'+ gemeentesFiltered
});
infowindow.open(map, this);
声明一个globar,var selectedInfoWindow;
并用它来保存打开的信息窗口:
var infoWindow = new google.maps.InfoWindow({
content: content
});
// Open the infowindow on marker click
google.maps.event.addListener(marker, "click", function() {
//Check if there some info window selected and if is opened then close it
if (selectedInfoWindow != null && selectedInfoWindow.getMap() != null) {
selectedInfoWindow.close();
//If the clicked window is the selected window, deselect it and return
if (selectedInfoWindow == infoWindow) {
selectedInfoWindow = null;
return;
}
}
//If arrive here, that mean you should open the new info window
//because is different from the selected
selectedInfoWindow = infoWindow;
selectedInfoWindow.open(map, marker);
});
处理新标记上的click事件时,需要跟踪先前的InfoWindow对象并在其上调用close方法。
注意:不必在共享信息窗口对象上调用关闭,使用其他标记调用打开会自动关闭原始对象。有关详细信息,请参见Daniel的答案。
close()
,如果使用单个InfoWindow
对象,则实际上不需要调用该方法。如果open()
在同一对象上再次调用该方法,它将自动关闭。
基本上,您需要一个保留对一个new InfoBox()
=>的引用的函数,委派onclick事件。在创建标记(循环)时使用bindInfoBox(xhr, map, marker);
// @param(project): xhr : data for infoBox template
// @param(map): object : google.maps.map
// @param(marker): object : google.maps.marker
bindInfoBox: (function () {
var options = $.extend({}, cfg.infoBoxOptions, { pixelOffset: new google.maps.Size(-450, -30) }),
infoBox = new window.InfoBox(options);
return function (project, map, marker) {
var tpl = renderTemplate(project, cfg.infoBoxTpl); // similar to Mustache, Handlebars
google.maps.event.addListener(marker, 'click', function () {
infoBox.setContent(tpl);
infoBox.open(map, marker);
});
};
}())
var infoBox
被异步分配并保存在内存中。每次调用bindInfoBox()
return函数都会被调用。也很方便通过infoBoxOptions
只一次!
在我的示例中,map
由于制表符事件延迟了初始化,因此我不得不在上添加一个额外的参数。
这是一种解决方案,不需要创建一个infoWindow即可重用它。您可以继续创建许多infoWindows,唯一需要做的是构建closeAllInfoWindows函数,并在打开新的infowindow之前调用它。因此,保留您的代码,您只需要:
创建一个全局数组来存储所有的infoWindows
var infoWindows = [];
在infoWindow = new之后,将每个新的infoWindow存储在数组中。
infoWindows.push(infoWindow);
创建closeAllInfoWindows函数
function closeAllInfoWindows() {
for (var i=0;i<infoWindows.length;i++) {
infoWindows[i].close();
}
}
在您的代码中,在打开infoWindow之前,调用closeAllInfoWindows()。
问候,
这样解决:
function window(content){
google.maps.event.addListener(marker,'click', (function(){
infowindow.close();
infowindow = new google.maps.InfoWindow({
content: content
});
infowindow.open(map, this);
}))
}
window(contentHtml);