Это обновленный окончательный код, который я получил, чтобы он работал. Я использую get.zoom и center.change, чтобы на карте всегда было 10 маркеров! (оригинальный вопрос ниже
'''
// Declare map and markers array globally
var map, markers = [];
function initMap() {
var myLatLng = {
lat: 0,
lng: 0
};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: myLatLng,
zoomControl: true
});
// Moved this out of the AJAX success and declared variable correctly
var infowindow = new google.maps.InfoWindow();
// Listen for zoom change event
// Handle markers display
google.maps.event.addListener(map, 'zoom_changed', handleMarkersDisplay);
$.ajax({
type: 'GET',
url: 'https://us-central1-cloud-calendar-project.cloudfunctions.net/InfoWindow',
success: function(data) {
data = JSON.parse(data);
for (var element in data) {
var marker = new google.maps.Marker({
position: {
lat: data[element].lat,
lng: data[element].lon
},
map: map,
title: element,
visible: false, // Default visibility is false
marker_celsius: data[element].celsius // Add celsius as marker property
});
console.log("marker@" + marker.getPosition().toUrlValue());
// Push this marker to the markers array
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, element) {
return function() {
var content = 'Country: ' + data[element].country;
content += '<br>Temperature (°C): ' + data[element].celsius;
content += '<br>Day: ' + data[element].day;
content += '<br>Month: ' + data[element].month;
infowindow.setContent(content);
infowindow.open(map, marker);
}
})(marker, element));
}
// All markers have been added, sort the markers array by celsius value
markers.sort(function(a, b) {
return b.marker_celsius - a.marker_celsius;
});
map.addListener('center_changed', function() {
window.setTimeout(handleMarkersDisplay() , 3000);
});
// Handle markers display
handleMarkersDisplay();
}
});
}
function handleMarkersDisplay() {
console.log("handleMarkerDisplay zoom=" + map.getZoom());
// Check if map current zoom <= 2
if (map.getZoom() <= 2) {
hideAllMarkers();
displayMarkers();
} else if (map.getZoom() == 3) {
hideAllMarkers();
displayMarkers();
} else if (map.getZoom() == 4) {
hideAllMarkers();
displayMarkers();
} else if (map.getZoom() == 5) {
hideAllMarkers();
displayMarkers();
}
}
function hideAllMarkers() {
for (i = 0; i < markers.length; i++) {
markers[i].setVisible(false);
}
}
function displayMarkers() {
// add new markers to map
var shownMarkers = 10;
for (var i = 0; i < markers.length; i++) {
// Only show the first 10 markers in the viewport
if (shownMarkers > 0) {
if (map.getBounds().contains(markers[i].getPosition())) {
markers[i].setVisible(true);
shownMarkers--;
}
} else {
markers[i].setVisible(false);
}
}
}
function displayAllMarkers() {
// Zoom is greater than 3, show all markers
for (var i = 0; i < markers.length; i++) {
markers[i].setVisible(true);
}
}
'''
Я работаю над веб-приложением, в котором я хочу отображать маркеры на карте, основываясь на самой высокой зарегистрированной температуре (от JSON файл, который я анализирую). В настоящее время я могу получить 10 маркеров самых высоких температур на карте, но когда я увеличиваю его, он не обновляется для добавления новых маркеров. Поэтому, когда я увеличиваю один I go с 10 маркеров до 8 видимых маркеров (вам нужно прокрутить, чтобы увидеть два других маркера). Я хотел бы добавить два новых маркера, которые соответствуют следующим наивысшим маркерам для этого вида, чтобы при любом виде / увеличении у вас всегда было 10 маркеров! ( вероятно, невозможно на каком-то уровне, например, увидеть только одну страну.) На рисунке ниже показано, что при увеличении 3 два маркера остаются вне поля зрения. Я нашел эту реализацию (https://github.com/endiliey/cs50/blob/master/pset8/mashup/static/scripts.js) от endiliey. Однако реализация не работает ..