我使用了一个时髦的地图示例，我希望在单击另一个图标时自动关闭信息窗口？
我为标记设置了一些变量，因为我希望每个标记都是不同的颜色。然后，我将保存信息的信息变量中的每个标记变量称为每个标记变量。
由于我是Web开发的新手，因此将获得任何帮助。
$(function() {
var mapStyle = [{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#444444"
}]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [{
"color": "#f2f2f2"
}]
},
{
"featureType": "landscape.natural",
"elementType": "all",
"stylers": [{
"visibility": "on"
},
{
"color": "#e6e6e6"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [{
"saturation": -100
},
{
"lightness": 45
}
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [{
"visibility": "on"
},
{
"hue": "#ff0000"
}
]
},
{
"featureType": "road.highway",
"elementType": "all",
"stylers": [{
"visibility": "simplified"
}]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [{
"color": "#fd9836"
},
{
"saturation": "85"
},
{
"lightness": "31"
},
{
"gamma": "1.24"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text",
"stylers": [{
"visibility": "simplified"
}]
},
{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [{
"hue": "#ff0000"
},
{
"saturation": "1"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "transit.station",
"elementType": "all",
"stylers": [{
"visibility": "simplified"
},
{
"hue": "#ff0000"
},
{
"saturation": "-100"
}
]
},
{
"featureType": "transit.station.airport",
"elementType": "all",
"stylers": [{
"visibility": "on"
}]
},
{
"featureType": "transit.station.bus",
"elementType": "all",
"stylers": [{
"visibility": "simplified"
}]
},
{
"featureType": "transit.station.rail",
"elementType": "all",
"stylers": [{
"visibility": "simplified"
},
{
"hue": "#ff7e00"
},
{
"saturation": "-100"
},
{
"lightness": "19"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [{
"color": "#d7d7d7"
},
{
"visibility": "on"
}
]
}
];
// Create the map
var map = new google.maps.Map($('.map-canvas')[0], {
zoom: 8,
styles: mapStyle,
center: new google.maps.LatLng(53.685429, -1.503624)
});
var adamDawson = new google.maps.Marker({
position: new google.maps.LatLng(53.992120, -1.541812), //harrogate
map: map,
title: 'click for details',
icon: '../fda_map_2/assets/images/icon_green.png'
});
var andrewGomersall = new google.maps.Marker({
position: new google.maps.LatLng(53.792036, -1.539607), //jrc.agency
map: map,
title: 'click for details',
icon: '../fda_map_2/assets/images/icon_dark_green.png'
});
var chloeFrank = new google.maps.Marker({
position: new google.maps.LatLng(51.519962, -0.109158), //we make websites
map: map,
title: 'click for details',
icon: '../fda_map_2/assets/images/icon_green.png'
});
var darrenSmith = new google.maps.Marker({
position: new google.maps.LatLng(53.716489, -1.640213), //buffalo web design
map: map,
title: 'click for details',
icon: '../fda_map_2/assets/images/icon_orange.png'
});
var geniusDivision = new google.maps.Marker({
position: new google.maps.LatLng(53.555143, -1.479377), //geniusdivision
map: map,
title: 'click for details',
icon: '../fda_map_2/assets/images/icon_orange.png'
});
// Add a Snazzy Info Window to the marker
var info = new SnazzyInfoWindow({
marker: adamDawson,
content: '<h2>Adam Dawson</h2>' +
'<p>Freelance Web Designer & Developer</p>' +
'<a class="work-url" href="http://www.dawsony.com/" target="_blank">Adam Dawson - Web Design & Development</a>',
closeOnMapClick: true
});
var info = new SnazzyInfoWindow({
marker: andrewGomersall,
content: '<h2>Andrew Gomersall</h2>' +
'<p>Lead Developer</p>' +
'<a class="work-url" href="https://jrc.agency/" target="_blank">jrc.agency</a>',
closeOnMapClick: true
});
var info = new SnazzyInfoWindow({
marker: chloeFrank,
content: '<h2>Chloe Frank</h2>' +
'<p>Front-End Developer</p>' +
'<a class="work-url" href="https://wemakewebsites.com/" target="_blank">We Make Websites</a>',
closeOnMapClick: true
});
var info = new SnazzyInfoWindow({
marker: darrenSmith,
content: '<h2>Darren Smith</h2>' +
'<p>Web Developer</p>' +
'<a class="work-url" href="https://www.buffalowebdesign.co.uk/contact/" target="_blank">Buffalo Web Design</a>',
closeOnMapClick: true
});
var info = new SnazzyInfoWindow({
marker: geniusDivision, //genius div
content:
'<div class="genius-wrap">' +
'<img src="../fda_map_2/assets/images/icon.png">' +
'<h2>Craig Burgess</h2>' +
'<p>Creative Director</p>' +
'<a class="work-url" href="https://www.geniusdivision.com/" target="_blank">Genius Division</a>' +
'<h2>James Sheriff</h2>' +
'<p>Business Development Director</p>' +
'<a class="work-url" href="https://www.geniusdivision.com/" target="_blank">Genius Division</a>' +
'<h2>Aaron Linley</h2>' +
'<p>Web Designer / Front-End Developer</p>' +
'<a class="work-url" href="https://www.geniusdivision.com/" target="_blank">Genius Division</a>' +
'</div>',
closeOnMapClick: true
});
google.maps.event.addListener(marker, 'click', function() {
info.open(map,marker);
});
});
https://jsfiddle.net/antonymoss/70vmsatb/12/
像下面一样，将closeWhenOthersOpen: true添加到所有SnazzyInfoWindows的属性中。
var info = new SnazzyInfoWindow({
marker: adamDawson,
content: '<h2>Adam Dawson</h2>' +
'<p>Freelance Web Designer & Developer</p>' +
'<a class="work-url" href="http://www.dawsony.com/" target="_blank">Adam Dawson - Web Design & Development</a>',
closeOnMapClick: true,
closeWhenOthersOpen: true
});
我在时髦的信息窗口文档中找到了该属性。
您可以在此更新的 JSFiddle 中对其进行测试。