我有以下代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<title>Circles</title>
<style>
html, body {
height: 100%;
margin: 0px;
padding: 0px
}
#map-canvas {
height: 450px;
width:100%;
margin: 0px;
padding: 0px
}
</style>
<script>
function initialize() {
var openedInfoWindow = [];
var locations = [
['<div style="overflow:hidden;width: 250px;"><p>marker content</p><a style="background:#C785DB;color:#ffffff;padding:10px 50px;" href="http://asteriadiamonds.com/en/appointmet" alt="book an appointment with Asteria Diamonds">BOOKAN APPOINTMENT</a></div>', 22.28522,114.155454],
['Marker 2', 31.112813,121.381709],
['Marker 3', 22.536733,114.117746],
['Marker 4', 39.922174,116.429486],
['Marker 5', 31.229686,121.525165],
['Marker 6', 25.204849,55.270783],
['Marker 7', 51.215363,4.420155],
['Marker 8', 48.856614,2.352222],
['Marker 9', 51.51884,-0.108119],
['Marker 10', 51.515553,-0.088366],
['Marker 11', 46.202415,6.157759],
['Marker 12', 34.075376,-84.29409],
['Marker 13', 40.765852,-111.897878],
['Marker 14', 40.756956,-73.979834],
['Marker 14', 32.084064,34.801722]
];
var cityCircle;
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
});
var icon10175412 = { url: 'http://asteriadiamonds.com/skin/frontend/asteriadiamonds/default/images/map-marker.png', origin: new google.maps.Point(0,0),};
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: icon10175412,
map: map
});
var bounds = new google.maps.LatLngBounds();
var icon10175412 = { url: 'http://asteriadiamonds.com/skin/frontend/asteriadiamonds/default/images/map-marker.png', origin: new google.maps.Point(0,0),};
for (i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: icon10175412,
content: locations[i][0]
});
bounds.extend(marker.position);
openedInfoWindow[i] = null;
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function(marker, i, infowindow) {
return function () {
if(openedInfoWindow[i] != null){
openedInfoWindow[i].close();
openedInfoWindow[i] = null;
}else{
infowindow.setContent(this.content);
infowindow.open(map, this);
openedInfoWindow[i] = infowindow;
google.maps.event.addListener(infowindow, 'closeclick', function() {
openedInfoWindow[i] = null;
});
}
}
})(marker, i, infowindow));
google.maps.event.trigger(marker, 'click');
}
map.fitBounds(bounds);
var listener = google.maps.event.addListener(map, "idle", function () {
map.setZoom(2);
google.maps.event.removeListener(listener);
});
}
function loadScript() {
var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
我正在努力隐藏页面初始加载时标记的内容，因此只有在点击标记时我才会显示其内容。
我确信我错过了一些非常简单的事情，非常感谢您对此事的帮助。
提前谢谢。
答案 0 :(得分：2)
更改列表：
1）行google.maps.event.trigger(marker, 'click');触发每个标记的点击事件，它解释了为什么所有信息窗口在加载地图后都可见。
2）在您的情况下，不需要实例化google.maps.InfoWindow个对象的多个实例，只需在标记之间重用单个实例（参见下面的示例）
3）而不是：
var listener = google.maps.event.addListener(map, "idle", function () {
map.setZoom(2);
google.maps.event.removeListener(listener);
});
您可以使用google.maps.event.addListenerOnce事件：
google.maps.event.addListenerOnce(map, "idle", function () {
map.setZoom(2);
});
4）您可以考虑加载客户端API，如下所示：
<script src="https://maps.googleapis.com/maps/api/js?callback=initialize" async defer></script>
而不是：
function loadScript() {
var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
修改后的示例
function initialize() {
var locations = [
['<div style="overflow:hidden;width: 250px;"><p>marker content</p><a style="background:#C785DB;color:#ffffff;padding:10px 50px;" href="http://asteriadiamonds.com/en/appointmet" alt="book an appointment with Asteria Diamonds">BOOKAN APPOINTMENT</a></div>', 22.28522, 114.155454],
['Marker 2', 31.112813, 121.381709],
['Marker 3', 22.536733, 114.117746],
['Marker 4', 39.922174, 116.429486],
['Marker 5', 31.229686, 121.525165],
['Marker 6', 25.204849, 55.270783],
['Marker 7', 51.215363, 4.420155],
['Marker 8', 48.856614, 2.352222],
['Marker 9', 51.51884, -0.108119],
['Marker 10', 51.515553, -0.088366],
['Marker 11', 46.202415, 6.157759],
['Marker 12', 34.075376, -84.29409],
['Marker 13', 40.765852, -111.897878],
['Marker 14', 40.756956, -73.979834],
['Marker 14', 32.084064, 34.801722]
];
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
});
var infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
var icon10175412 = { url: 'http://asteriadiamonds.com/skin/frontend/asteriadiamonds/default/images/map-marker.png', origin: new google.maps.Point(0, 0), };
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
//icon: icon10175412,
content: locations[i][0]
});
bounds.extend(marker.position);
google.maps.event.addListener(marker, 'click', function(){
infowindow.setContent(this.content);
infowindow.open(map, this);
});
}
map.fitBounds(bounds);
google.maps.event.addListenerOnce(map, "idle", function () {
map.setZoom(2);
});
} html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
#map-canvas {
height: 450px;
width: 100%;
margin: 0px;
padding: 0px;
} <div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?callback=initialize" async defer></script>
答案 1 :(得分：1)
您甚至会在代码中的每个标记上触发点击。删除这一行：
google.maps.event.trigger(marker, 'click');