如何使用Google Maps API一次只能看到10个标记，无论地图视图/缩放如何

Question

我希望改进我的web应用程序中的谷歌地图。我在地图上有大约200个标记，但显然这在视觉上没有吸引力。我想知道是否有一种方法可以让它只显示基于变量摄氏度的10个标记？所以，如果地图是基于全世界视图的，你会看到有记录的10个最高温度的标记。如果你移动到世界地图上的另一个部分，或者放大，我希望标记更新。

这可能吗？我试图通过包含最多10个标记来实现这一点，但我无法使其成为动态的，因为当我添加标记时，我会通过JSON文件进行解析。它具有以下输出{"AA"：{"celsius"：32.27777777778，"country"："AA"，"day"："25"，"lat"：12.5，"lon"：-70.017，"month"："03"}。

这是我最后一个完全运行的代码。。

// 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
google.maps.event.addListener(map, 'zoom_changed', function() {
// Handle markers display
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
});
// 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;
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;
});
// Handle markers display
handleMarkersDisplay();
}
});
}
function handleMarkersDisplay() {
// Check if map current zoom <= 2
if (map.getZoom() <= 2) {
// Loop through markers array
for (var i = 0; i < markers.length; i++) {
// Only show the first 10 markers
if (i < 10) {
markers[i].setVisible(true);
} else {
markers[i].setVisible(false);
}
}
} else if (map.getZoom() == 3) {
// Loop through markers array
for (var i = 0; i < markers.length; i++) {
// Only show the first 10 markers
if (i < 10) {
markers[i].setVisible(true);
} else {
markers[i].setVisible(false);
}
}
} else if (map.getZoom() == 4) {
// Loop through markers array
for (var i = 0; i < markers.length; i++) {
// Only show the first 10 markers
if (i < 10) {
markers[i].setVisible(true);
} else {
markers[i].setVisible(false);
}
}
} else if (map.getZoom() == 5) {
// Loop through markers array
for (var i = 0; i < markers.length; i++) {
// Only show the first 10 markers
if (i < 10) {
markers[i].setVisible(true);
} else {
markers[i].setVisible(false);
}
}
} else if (map.getZoom() == 6) {
// Loop through markers array
for (var i = 0; i < markers.length; i++) {
// Only show the first 10 markers
if (i < 10) {
markers[i].setVisible(true);
} else {
markers[i].setVisible(false);
}
}
} else if (map.getZoom() == 7) {
// Loop through markers array
for (var i = 0; i < markers.length; i++) {
// Only show the first 10 markers
if (i < 10) {
markers[i].setVisible(true);
} else {
markers[i].setVisible(false);
}
}
} else if (map.getZoom() == 8 ) {
// Loop through markers array
for (var i = 0; i < markers.length; i++) {
// Only show the first 10 markers
if (i < 10) {
markers[i].setVisible(true);
} else {
markers[i].setVisible(false);
}
}
} else if (map.getZoom() == 9) {
// Loop through markers array
for (var i = 0; i < markers.length; i++) {
// Only show the first 10 markers
if (i < 10) {
markers[i].setVisible(true);
} else {
markers[i].setVisible(false);
}
}
} else if (map.getZoom() == 10) {
// Loop through markers array
for (var i = 0; i < markers.length; i++) {
// Only show the first 10 markers
if (i < 10) {
markers[i].setVisible(true);
} else {
markers[i].setVisible(false);
}
}
} else {
// Zoom is greater than 3, show all markers
for (var i = 0; i < markers.length; i++) {
markers[i].setVisible(true);
}
}
}

Answer 1

您需要两样东西：

1. 将celsius值作为特性添加到每个Marker对象
2. 将每个Marker对象添加到标记阵列中，以便保留它们的引用

谷歌地图API提供了多个您可以收听的事件。其中之一是zoom_changed事件。有了这个，你可以遵循这个逻辑：

1. 使用AJAX请求数据
2. 创建每个Marker对象并将其可见性设置为false
3. 将celsius值添加为Marker特性
4. 将每个标记添加到标记阵列

完成此操作并创建所有标记后：

5. 按celsius值对标记数组进行排序
6. 检查当前缩放级别
7. 如果缩放级别低于n，则循环浏览标记并仅显示n项
8. 如果缩放级别高于n，则循环浏览标记并显示所有标记

当用户通过监听zoom_changed事件来更改缩放级别时，重复该逻辑。

下面的工作示例，如果缩放<=，将仅显示10个最高摄氏度标记2，我评论了我所改变的一切。缩放一个级别，所有这些都将显示出来。

// 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
google.maps.event.addListener(map, 'zoom_changed', function() {
// Handle markers display
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
});
// 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;
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;
});
// Handle markers display
handleMarkersDisplay();
}
});
}
function handleMarkersDisplay() {
// Check if map current zoom <= 2
if (map.getZoom() <= 2) {
// Loop through markers array
for (var i = 0; i < markers.length; i++) {
// Only show the first 10 markers
if (i < 10) {
markers[i].setVisible(true);
} else {
markers[i].setVisible(false);
}
}
} else {
// Zoom is greater than 2, show all markers
for (var i = 0; i < markers.length; i++) {
markers[i].setVisible(true);
}
}
}

#map {
height: 180px;
}

<div id="map"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>