創建標記時，將偵聽器添加到標記，如相關示例中所示。不在zoom_changed地圖上的事件監聽器中。
不確定為什么要在標記隱藏時添加偵聽器（.setVisible(false)大小寫），而不是在顯示標記時添加偵聽器，但如果在創建標記時將偵聽器添加到標記，則不需要執行任何特殊操作。
相關問題使用函數閉包將標記與其InfoWindow內容相關聯（或者單擊標記時您想要執行的任何操作），下面的代碼使用關鍵字let，這是該問題的現代解決方案，但函數更接近可以用作好吧，特別是如果您需要支持舊版瀏覽器。
for (let i = 0; i < locationsCoordinates.length; i++) {
const bridge = locationsCoordinates[i];
let marker = new google.maps.Marker({
position: bridge[1],
title: bridge[0],
map,
icon: 'img/bridges.png',
clickable: true,
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', function(evt) {
infowindow.setContent(locationsCoordinates[i][0]);
infowindow.open(map, marker);
test += 1;
});
}
google.maps.event.addListener(map, 'zoom_changed', function() {
let zoom = map.getZoom();
if (zoom < 12) {
for (let i = 0; i < markers.length; i++) {
markers[i].setVisible(false);
}
} else {
for (let i = 0; i < markers.length; i++) {
markers[i].setVisible(true);
}
}
})
概念證明小提琴
代碼片段：
// The following example creates markers to indicate beaches near
// Sydney, NSW, Australia.
let markers = [];
let test = 0;
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 10,
center: {
lat: -33.9,
lng: 151.2
},
});
let infowindow = new google.maps.InfoWindow();
// Adds markers to the map.
for (let i = 0; i < locationsCoordinates.length; i++) {
const bridge = locationsCoordinates[i];
let marker = new google.maps.Marker({
position: bridge[1],
title: bridge[0],
map,
clickable: true,
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', function(evt) {
infowindow.setContent(locationsCoordinates[i][0]);
infowindow.open(map, marker);
test += 1;
console.log("open infowindow:" + this.getTitle() + " test=" + test);
});
}
google.maps.event.addListener(map, 'zoom_changed', function() {
let zoom = map.getZoom();
if (zoom < 12) {
infowindow.close();
for (let i = 0; i < markers.length; i++) {
markers[i].setVisible(false);
}
} else {
for (let i = 0; i < markers.length; i++) {
markers[i].setVisible(true);
}
}
})
}
// Data for the markers consisting of a name and a LatLng.
const locationsCoordinates = [
["Bondi Beach", {
lat: -33.890542,
lng: 151.274856
}],
["Coogee Beach", {
lat: -33.923036,
lng: 151.259052
}],
["Cronulla Beach", {
lat: -34.028249,
lng: 151.157507
}],
["Manly Beach", {
lat: -33.80010128657071,
lng: 151.28747820854187
}],
["Maroubra Beach", {
lat: -33.950198,
lng: 151.259302
}],
];
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Complex Marker Icons</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
</body>
</html>
