如何添加带有多个标记的Google地图在加载和点击时显示Infowindows [英] How to Add Google Maps with Multiple Markers Showing Infowindows on Load and on Click
本文介绍了如何添加带有多个标记的Google地图在加载和点击时显示Infowindows的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试添加带有多个标记的Google地图。所有标记都有信息窗口。我想显示所有infowindows默认显示在页面加载。当有人点击地图或标记时，所有infowindows必须关闭，然后通过点击标记来显示。
以下是我试图实现的方法： p>
< meta name =viewportcontent =initial-scale = 1.0， user-scalable = no/>< style type =text / css> html {height：100％} body {height：100％;保证金：0; padding：0} #map {height：100％}< / style>< script type =text / javascriptsrc =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'地址2']，['贷款3'，34.028249,151.157507，'地址3']，['贷款4'，33.80010128657071,151.28747820854187'地址4']，['贷款5'，33.950198,151.259302'，地址5 ]];函数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 ='加载标题'; var infowindow = new google.maps.InfoWindow（{content：contentString，maxWidth：160}）; infowindow.open（map，marker）; //点击地图关闭信息窗口的事件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必须关闭，但它们不关闭。
解决方案
你需要函数闭包（IIFE）您的infowindow变量：
//点击地图
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， '贷款3'，34.028249,151.157507，'地址3']，['贷款4'，33.80010128657071,151.28747820854187，'地址4']，['贷款5'，33.950198,151.259302， 'address 5']];函数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 ='加载标题'; var infowindow = new google.maps.InfoWindow（{content：contentString，maxWidth：160}）; infowindow.open（map，marker）; //点击地图关闭信息窗口的事件google.maps.event.addListener（map，'click'，（function（infowindow）{return function（）{infowindow.close（）;}}）（infowindow ））; google.maps.event.addListener（marker，'click'，（function（marker，i）{return function（）{//关闭加载时打开的所有其他infowindows 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％;宽度：100％; margin：0px; < script src =https：//
I am trying to add Google Maps with multiple markers. All markers have info windows. I want to show all infowindows to show by default on page load. When someone clicks on map or on a marker, all infowindows must close and then show by clicking on the markers.
Here is how I am trying to achieve it:
<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>
The code above works fine but it shows duplicate infowindows. On click the infowindows that open on load must close but they are not closing.
解决方案
You need function closure (an IIFE) on your infowindow variable:
// 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));
code snippet:
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>
这篇关于如何添加带有多个标记的Google地图在加载和点击时显示Infowindows的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
