Карты Google: автоматическое закрытие открытых информационных окон?
На моем сайте я использую Google Maps API v3 для размещения маркеров домов на карте.
Информационные окна остаются открытыми, если вы явно не нажмете значок закрытия. Это означает, что вы можете одновременно открыть более 2 информационных окон, если наведите курсор на маркер карты.
Вопрос: Как сделать так, чтобы был открыт только текущий активный InfoWindow, а все остальные InfoWindows закрыты? То есть одновременно будет открыто не более 1 InfoWindow?
10 ответов
Для InfoWindows существует функция close(). Просто следите за последним открытым окном и вызывайте для него функцию закрытия при создании нового окна.
Это демо имеет ту функциональность, которую вы ищете. Я нашел это в демонстрационной галерее Maps API V3.
Альтернативное решение для этого с использованием многих информационных окон: сохранить предыдущее открытое информационное окно в переменной, а затем закрыть его при открытии нового окна
var prev_infowindow =false;
...
base.attachInfo = function(marker, i){
var infowindow = new google.maps.InfoWindow({
content: 'yourmarkerinfocontent'
});
google.maps.event.addListener(marker, 'click', function(){
if( prev_infowindow ) {
prev_infowindow.close();
}
prev_infowindow = infowindow;
infowindow.open(base.map, marker);
});
}
//assuming you have a map called 'map'
var infowindow = new google.maps.InfoWindow();
var latlng1 = new google.maps.LatLng(0,0);
var marker1 = new google.maps.Marker({position:latlng1, map:map});
google.maps.event.addListener(marker1, 'click',
function(){
infowindow.close();//hide the infowindow
infowindow.setContent('Marker #1');//update the content for this marker
infowindow.open(map, marker1);//"move" the info window to the clicked marker and open it
}
);
var latlng2 = new google.maps.LatLng(10,10);
var marker2 = new google.maps.Marker({position:latlng2, map:map});
google.maps.event.addListener(marker2, 'click',
function(){
infowindow.close();//hide the infowindow
infowindow.setContent('Marker #2');//update the content for this marker
infowindow.open(map, marker2);//"move" the info window to the clicked marker and open it
}
);
Это "переместит" информационное окно к каждому нажатому маркеру, фактически закроет себя, а затем снова откроет (и проведет панорамирование, чтобы соответствовать области просмотра) на новом месте. Он изменяет свое содержимое перед открытием, чтобы дать желаемый эффект. Работает для n маркеров.
Мое решение.
var map;
var infowindow = new google.maps.InfoWindow();
...
function createMarker(...) {
var marker = new google.maps.Marker({
...,
descrip: infowindowHtmlContent
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setOptions({
content: this.descrip,
maxWidth:300
});
infowindow.open(map, marker);
});
Объявить переменную для активного окна
var activeInfoWindow;
и связать этот код в маркере слушателя
marker.addListener('click', function () {
if (activeInfoWindow) { activeInfoWindow.close();}
infowindow.open(map, marker);
activeInfoWindow = infowindow;
});
По этой ссылке http://www.svennerberg.com/2009/09/google-maps-api-3-infowindows/:
Teo: Самый простой способ сделать это - просто иметь один экземпляр объекта InfoWindow, который вы используете снова и снова. Таким образом, когда вы нажимаете на новый маркер, информационное окно "перемещается" от того места, где оно находится в данный момент, к новому маркеру.
Используйте метод setContent, чтобы загрузить его с правильным содержимым.
Есть более простой способ, кроме использования функции close(). если вы создаете переменную со свойством InfoWindow, она автоматически закрывается при открытии другой.
var info_window;
var map;
var chicago = new google.maps.LatLng(33.84659, -84.35686);
function initialize() {
var mapOptions = {
center: chicago,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
info_window = new google.maps.InfoWindow({
content: 'loading'
)};
createLocationOnMap('Location Name 1', new google.maps.LatLng(33.84659, -84.35686), '<p><strong>Location Name 1</strong><br/>Address 1</p>');
createLocationOnMap('Location Name 2', new google.maps.LatLng(33.84625, -84.36212), '<p><strong>Location Name 1</strong><br/>Address 2</p>');
}
function createLocationOnMap(titulo, posicao, conteudo) {
var m = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
title: titulo,
position: posicao,
html: conteudo
});
google.maps.event.addListener(m, 'click', function () {
info_window.setContent(this.html);
info_window.open(map, this);
});
}
Как насчет -
google.maps.event.addListener(yourMarker, 'mouseover', function () {
yourInfoWindow.open(yourMap, yourMarker);
});
google.maps.event.addListener(yourMarker, 'mouseout', function () {
yourInfoWindow.open(yourMap, yourMarker);
});
Тогда вы можете просто навести на него курсор, и он закроется сам.
var map;
var infowindow;
...
function createMarker(...) {
var marker = new google.maps.Marker({...});
google.maps.event.addListener(marker, 'click', function() {
...
if (infowindow) {
infowindow.close();
};
infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 300
});
infowindow.open(map, marker);
}
...
function initialize() {
...
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
...
google.maps.event.addListener(map, 'click', function(event) {
if (infowindow) {
infowindow.close();
};
...
}
}
Я сохранил переменную вверху, чтобы отслеживать, какое информационное окно открыто в данный момент, см. Ниже.
var currentInfoWin = null;
google.maps.event.addListener(markers[counter], 'click', function() {
if (currentInfoWin !== null) {
currentInfoWin.close(map, this);
}
this.infoWin.open(map, this);
currentInfoWin = this.infoWin;
});
Вот что я использовал, если вы используете много маркеров в цикле for (здесь Django). Вы можете установить индекс для каждого маркера и устанавливать этот индекс каждый раз, когда вы открываете окно. Закрытие ранее сохраненного индекса:
markers = Array();
infoWindows = Array();
var prev_infowindow =false;
{% for obj in objects %}
var contentString = 'your content'
var infowindow = new google.maps.InfoWindow({
content: contentString,
});
var marker = new google.maps.Marker({
position: {lat: {{ obj.lat }}, lng: {{ obj.lon }}},
map: map,
title: '{{ obj.name }}',
infoWindowIndex : {{ forloop.counter0 }}
});
google.maps.event.addListener(marker, 'click',
function(event)
{
if( prev_infowindow ) {
infoWindows[prev_infowindow].close();
}
prev_infowindow = this.infoWindowIndex;
infoWindows[this.infoWindowIndex].open(map, this);
}
);
infoWindows.push(infowindow);
markers.push(marker);
{% endfor %}
var contentString = "Location: " + results[1].formatted_address;
google.maps.event.addListener(marker,'click', (function(){
infowindow.close();
infowindow = new google.maps.InfoWindow({
content: contentString
});
infowindow.open(map, marker);
}));