Google Maps: Auto close open InfoWindows?
мой сайт, Я использую Google Maps API v3 для размещения маркеров дома на карте.
InfoWindows остаются открытыми, если вы явно не щелкните значок закрыть. Это означает, что вы можете иметь 2+ InfoWindows открыты одновременно, если вы наведете курсор на маркер карты.
вопрос: как сделать так, чтобы только текущее активное InfoWindow было открыто, а все остальные Infowindow были закрыты? Это означает, что одновременно будет открыто не более 1 InfoWindow?
10 ответов:
есть закрыть()
альтернативное решение для этого с помощью многих infowindows: сохранить prev открыл infowindow в переменной, а затем закрыть его при открытии нового окна
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); }
по этой ссылке 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; });
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); }));
Comments