2 回答

TA貢獻(xiàn)2036條經(jīng)驗(yàn) 獲得超8個(gè)贊
您需要使用addListenerOnce并稍微重構(gòu)您的代碼。像這樣的東西
var locationsCoordinates = [{lat: 12.84, lng: 122.89}, {lat: 12.80, lng: 122.93}, {lat: 12.74, lng: 122.85}];
var markers = [];
for (let i = 0; i < locationsCoordinates.length; i++) {
? ? var marker = new google.maps.Marker({
? ? ? ? position: locationsCoordinates[i],
? ? ? ? map
? ? });
? ??
? ? google.maps.event.addListenerOnce(marker, "click", () => {
? ? ? ? console.log("marker", i, "clicked");
? ? });
? ??
? ? markers.push(marker);
}
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);
? ? ? ? }
? ? }
})

TA貢獻(xiàn)1853條經(jīng)驗(yàn) 獲得超18個(gè)贊
創(chuàng)建標(biāo)記時(shí),將偵聽器添加到標(biāo)記,如相關(guān)示例中所示。不在zoom_changed
地圖上的事件監(jiān)聽器中。
不確定為什么要在標(biāo)記隱藏時(shí)添加偵聽器(.setVisible(false)
大小寫),而不是在顯示標(biāo)記時(shí)添加偵聽器,但如果在創(chuàng)建標(biāo)記時(shí)將偵聽器添加到標(biāo)記,則不需要執(zhí)行任何特殊操作。
相關(guān)問題使用函數(shù)閉包將標(biāo)記與其InfoWindow
內(nèi)容相關(guān)聯(lián)(或者單擊標(biāo)記時(shí)您想要執(zhí)行的任何操作),下面的代碼使用關(guān)鍵字let
,這是該問題的現(xiàn)代解決方案,但函數(shù)更接近可以用作好吧,特別是如果您需要支持舊版瀏覽器。
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>
添加回答
舉報(bào)