如何在加载和点击中添加多个标记显示Infowindow的Google
如何在加载和点击中添加多个标记显示Infowindow的Google
提问于 2017-12-12 16:19:10
我试图添加多个标记的谷歌地图。所有标记都有信息窗口。在默认情况下，我希望在页面加载上显示所有infowindow。当有人单击地图或标记时，所有信息流必须关闭，然后单击标记显示。
以下是我努力实现这一目标的方式：
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0
}
#map {
height: 100%
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var locations = [
['loan 1', 33.890542, 151.274856, 'address 1'],
['loan 2', 33.923036, 151.259052, 'address 2'],
['loan 3', 34.028249, 151.157507, 'address 3'],
['loan 4', 33.80010128657071, 151.28747820854187, 'address 4'],
['loan 5', 33.950198, 151.259302, 'address 5']
];
function initMap() {
var latlng = new google.maps.LatLng(locations[0][1], locations[0][2]);
mapOptions = {
zoom: 8,
center: latlng
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var infowindow = new google.maps.InfoWindow();
for (i = 0; i < locations.length; i++) {
var icon = '';
if ( locations[i][0].length != '' && locations[i][1].length != '' ) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
title: locations[i][3],
});
var contentString = 'Title on Load';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 160
});
infowindow.open(map, marker);
// Event that closes the Info Window with a click on the map
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var contentString = 'Title on Click';
infowindow.setContent(contentString);
infowindow.open(map, marker);
}
})(marker, i));
}
}
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
上面的代码工作得很好，但是它显示了重复的infowindows。单击打开的加载必须关闭的infowindows，但它们没有关闭。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-12-15 08:05:57
您需要在您的IIFE变量上设置函数闭包(一个生命)：
// Event that closes the Info Window with a click on the map
google.maps.event.addListener(map, 'click', (function(infowindow) {
return function() {
infowindow.close();
}})(infowindow));代码片段：
var locations = [
['loan 1', 33.890542, 151.274856, 'address 1'],
['loan 2', 33.923036, 151.259052, 'address 2'],
['loan 3', 34.028249, 151.157507, 'address 3'],
['loan 4', 33.80010128657071, 151.28747820854187, 'address 4'],
['loan 5', 33.950198, 151.259302, 'address 5']
];
function initMap() {
var latlng = new google.maps.LatLng(locations[0][1], locations[0][2]);
mapOptions = {
zoom: 8,
center: latlng
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var infowindow = new google.maps.InfoWindow();
for (i = 0; i < locations.length; i++) {
var icon = '';
if (locations[i][0].length != '' && locations[i][1].length != '') {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
title: locations[i][3],
});
var contentString = 'Title on Load';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 160
});
infowindow.open(map, marker);
// Event that closes the Info Window with a click on the map
google.maps.event.addListener(map, 'click', (function(infowindow) {
return function() {
infowindow.close();
}
})(infowindow));
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
// close all the other infowindows that opened on load
google.maps.event.trigger(map, 'click')
var contentString = 'Title on Click';
infowindow.setContent(contentString);
infowindow.open(map, marker);
}
})(marker, i));
}
}
}
google.maps.event.addDomListener(window, 'load', initMap);html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47777107
复制相关文章
相似问题
腾讯云开发者
