无论如何使用地图查看/缩放，如何一次使用Google Maps API仅查看10个标记

Question

我正在尝试改进Web应用程序中的Google Map。我在地图上有大约200个标记，但是显然这在视觉上没有吸引力。我想知道是否有一种方法可以基于变量摄氏仅显示10个标记？因此，如果地图基于整个世界，您将看到记录的10个最高温度的标记。如果您移至世界地图上的另一部分或放大，则希望更新标记。

这可能吗？我尝试通过最多包含10个标记来做到这一点，但是我无法使其具有动态性，因为当我添加标记时，我会通过JSON文件进行解析。其中具有以下输出{“ AA”：{“ celsius”：32.27777777777778，“ country”：“ AA”，“ day”：“ 25”，“ lat”：12.5，“ lon”：-70.017，“ month”： “ 03”}。

这是我最后一个功能正常的代码。

'''

    function initMap() {

        var myLatLng = {
        lat: 0.1025
        , lng: 51.5280
        };


        var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 4
                    , center: myLatLng
                });



        $.ajax({
            type: 'GET'
            , url: 'https://us-central1-cloud-calendar-project.cloudfunctions.net/InfoWindow'
            , success: function (data) {
                data = JSON.parse(data)
                infowindow = new google.maps.InfoWindow();

                for( var element in data){
                    var marker = new google.maps.Marker({
                    position: {
                        lat: data[element].lat
                        , lng: data[element].lon
                    },
                    map: map,
                    title: element
                });

                google.maps.event.addListener(marker, 'click', (function (marker, element) {
                    return function () {

                        var content = 'The hottest recorded temperature of 2020 ';
                        content += '<br>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));
                }
            }
        });
    }
    initMap();

'''

非常感谢您的帮助！或任何有用的文档：）

Answer 1

您将需要两件事：

1. 将摄氏度值作为属性添加到每个Marker对象中
2. 将每个Marker对象添加到markers数组，以便保留它们的引用

Google Maps API提供了多个events，您可以收听。其中之一是zoom_changed事件。这样，您可以遵循以下逻辑：

1. 使用AJAX请求数据
2. 创建每个标记对象并将其可见性设置为false
3. 将摄氏值添加为标记属性
4. 将每个标记添加到标记数组

一旦完成并创建了所有标记：

5. 按摄氏度值对标记数组排序
6. 检查当前的缩放级别
7. 如果缩放级别低于n，则循环通过标记并仅显示n个项目
8. 如果缩放级别高于n，则循环浏览标记并全部显示它们

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

下面的工作示例，如果缩放<= 2，将仅显示最高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
  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>