我使用此脚本使用Google地图API显示每个相应地图位置旁边的小信息窗口。
问题是当您点击位置01，位置02等时，小窗口仍保持打开状态，并且可以轻松地显示在彼此之上，这不是非常用户友好。
我需要做的是在任何给定时间只能看到一个小信息窗口。例如，如果我点击“位置01”＆＃39;那么可能已经打开的所有其他信息窗口都会关闭。
你可以在这里看到小提琴：https://jsfiddle.net/vm4cksue/
...或在这里查看我的代码......
(function($) {
function new_map( $el ) {
// var
var $markers = $el.find('.marker');
// vars
var args = {
//zoom : 14,
center : new google.maps.LatLng(0, 0),
scrollwheel : false,
mapTypeId : google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
}
};
// create map
var map = new google.maps.Map( $el[0], args);
// add a markers reference
map.markers = [];
// add markers
// add identifying number to each marker
var sidebar = 1;
$markers.each(function(){
add_marker( $(this), map, sidebar);
sidebar++;
});
// center map
center_map( map );
// return
return map;
}
function add_marker( $marker, map, sidebar ) {
// dynamic Lat & Long
var latlng = new google.maps.LatLng(
$marker.attr('data-lat'), $marker.attr('data-lng')
);
// Dynamic marker
var icon = $marker.attr('data-icon');
// create marker
var marker = new google.maps.Marker({
position: latlng,
map: map,
animation: google.maps.Animation.DROP, // animation
icon: icon,
});
// add to array
map.markers.push( marker );
// if marker contains HTML, add it to an infoWindow
if( $marker.html() )
{
// create info window
var infowindow = new google.maps.InfoWindow({
content : '<div id="iw-container">' + $marker.html() + '</div>'
});
/*
* The google.maps.event.addListener() event waits for
* the creation of the infowindow HTML structure 'domready'
* and before the opening of the infowindow defined styles
* are applied.
*/
google.maps.event.addListener(infowindow, 'domready', function() {
// Reference to the DIV which receives the contents of the infowindow using jQuery
var iwOuter = $('.gm-style-iw');
// Restyle parent DIVs
var iwBackground = iwOuter.prev();
// Removes background shadow DIV
iwBackground.children(':nth-child(2)').css({'display' : 'none'});
// Removes white background DIV
iwBackground.children(':nth-child(4)').css({'display' : 'none'});
// Moves the infowindow 115px to the right.
iwOuter.parent().parent().css({left: '125px'});
// Moves the shadow of the arrow 76px to the left margin.
iwBackground.children(':nth-child(1)').attr('style', function(i,s){ return s + 'left: 26px !important;'});
// Moves the arrow 76px to the left margin.
iwBackground.children(':nth-child(3)').attr('style', function(i,s){ return s + 'left: 26px !important;'});
// Changes the desired tail shadow color.
iwBackground.children(':nth-child(3)').find('div').children().css({'box-shadow': 'rgba(72, 181, 233, 0.6) 0px 1px 6px', 'z-index' : '1'});
// Restyle child DIVs
var iwBackground = iwOuter.next();
// Set a new variable iwCloseBtn.
var iwCloseBtn = iwOuter.next();
// hide default Google Maps sprite on close tag
iwCloseBtn.children(':nth-child(1)').css({'display' : 'none'});
// Apply the desired effect to the close button
iwCloseBtn.css({
width: '45px',
height: '45px',
opacity: '1', // by default the close button has an opacity of 0.7
right: '0',
top: '0', // button repositioning
'background-image':'url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-32.png)', // adding background image
'background-size': '25px',
'background-position': 'center',
'background-repeat': 'no-repeat'
});
// The API automatically applies 0.7 opacity to the button after the mouseout event.
// This function reverses this event to the desired value.
iwCloseBtn.mouseout(function(){
$(this).css({opacity: '1'});
});
});
// Create a click on the sidebar list and open the info window
$('#m'+sidebar).click(function(){
// Close info windows
$.each(map.markers, function(index,value){
if(infowindow)
infowindow.close();
});
// Click on the marker
google.maps.event.trigger(marker, "click");
});
// show info window when marker is clicked
google.maps.event.addListener(marker, 'click', function() {
infowindow.open( map, marker );
});
}
}
function center_map( map ) {
// vars
var bounds = new google.maps.LatLngBounds();
// loop through all markers and create bounds
$.each( map.markers, function( i, marker ){
var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
bounds.extend( latlng );
});
// only 1 marker?
if( map.markers.length == 1 )
{
// set center of map
map.setCenter( bounds.getCenter() );
//map.setZoom( 14 );
}
else
{
// fit to bounds
//map.fitBounds( bounds );
map.setCenter( bounds.getCenter() );
map.setZoom( 7 );
}
}
var map = null;
$(document).ready(function(){
$('.acf-map').each(function(){
// create map
map = new_map( $(this) );
});
});
})(jQuery);
答案 0 :(得分：0)
您可以声明窗口级别var actOpenWindow用于存储实际打开的窗口并在打开新窗口之前关闭
var actInfoWindow = null;
然后在你的听众中你应该管理正确的情况
google.maps.event.addListener(marker, 'click', function() {
if (actInfoWindow){
actInfoWindow.close();
}
if (infowindow!==actInfoWindow){
infowindow.open( map, marker );
actInfoWindow = infowindow;
} else {
actInfoWindow.close();
actInfoWindow = null;
}
});