無論 map 查看/縮放如何，如何使用 Google 地圖 API 一次只能看到 10 個標記

Question

我希望在我的 web 應用程序中改進 Google Map。 我在 map 上有大約 200 個標記，但顯然這在視覺上並不吸引人。 我想知道是否有一種方法可以根據變量攝氏度只顯示 10 個標記？ 因此，如果 map 是基於整個世界觀，您會看到記錄了 10 個最高溫度的標記。 如果您移動到世界 map 的另一部分，或者如果您放大，我希望標記更新。

這可能嗎？ 我嘗試通過包含最多 10 個標記來做到這一點，但我無法讓它成為動態的，因為當我添加標記時，我會通過 JSON 文件進行解析。 其中有以下 output {"AA": {"celsius": 32.27777777777778, "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

你需要兩件事：

將攝氏度值添加到每個標記 object 作為屬性
將每個標記 object 添加到標記數組中，以便保留它們的引用

谷歌地圖 API 提供了多個您可以收聽的事件。 其中之一是zoom_changed事件。 有了這個，你可以遵循這個邏輯：

使用 AJAX 請求數據
創建每個標記 object 並將其可見性設置為false
添加攝氏度值作為標記屬性
將每個標記添加到標記數組

完成此操作並創建所有標記后：

按攝氏度值對標記數組進行排序
檢查當前縮放級別
如果縮放級別低於n ，則遍歷標記並僅顯示n項
如果縮放級別高於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>

無論 map 查看/縮放如何，如何使用 Google 地圖 API 一次只能看到 10 個標記

問題描述

1 個解決方案

解決方案1
1 已采納 2020-04-03 00:17:05

無論 map 查看/縮放如何，如何使用 Google 地圖 API 一次只能看到 10 個標記

問題描述

1 個解決方案

解決方案1 1 已采納 2020-04-03 00:17:05

解決方案1
1 已采納 2020-04-03 00:17:05