javascript - 根据缩放级别显示标签

Question

根据缩放级别，我想显示或隐藏标记的标签，我在这里查看了答案，虽然我对我打算做什么有了更好的了解，但我还没有能够将其实现到我的谷歌地图中真是太幸运了。标签应仅在缩放级别 >7 时显示。

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: {lat: 52.024, lng: 2.887}        
    });

    setMarkers(map);
  }

     var tasks = [
['Marker 1', 32.89, 12.25, 78],
['Marker 2', 60.29, -4.29, 83],
['Marker 3', 57.39, 1.5, 85],
['Marker 4', 52.50, 4, 94]
  ];

  function setMarkers(map) {
    for (var i = 0; i < tasks.length; i++) {
      var task = tasks[i];
      var marker = new google.maps.Marker({
        position: {lat: task[1], lng: task[2]},
        map: map,
        title: task[0],
        label: task[0],
        url: "somesite?ID=" + task[3]
      });

      marker.addListener('click', function() {
      window.location.href = this.url;
    });

  }
  }

Answer 1

将对标记的引用保存在一个数组中。在 map 上创建一个 'zoom_changed' 监听器，当它执行时，如果缩放 <= 7，则处理隐藏标签的标记数组(将其设置为空)，如果缩放为，则显示标签(将其设置为标题) > 7.

  map.addListener('zoom_changed', function() {
    for (var i=0; i< gmarkers.length; i++) {
      if (map.getZoom() > 7) {
        gmarkers[i].setLabel(gmarkers[i].getTitle());
      } else {
        gmarkers[i].setLabel(null);
      }
    }
  });

proof of concept fiddle

代码片段:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: 52.024,
      lng: 2.887
    }
  });

  setMarkers(map);
  map.addListener('zoom_changed', function() {
    for (var i = 0; i < gmarkers.length; i++) {
      if (map.getZoom() > 7) {
        gmarkers[i].setLabel(gmarkers[i].getTitle());
      } else {
        gmarkers[i].setLabel(null);
      }
    }
  });
}

var tasks = [
  ['Marker 1', 32.89, 12.25, 78],
  ['Marker 2', 60.29, -4.29, 83],
  ['Marker 3', 57.39, 1.5, 85],
  ['Marker 4', 52.50, 4, 94]
];
var gmarkers = [];

function setMarkers(map) {
  for (var i = 0; i < tasks.length; i++) {
    var task = tasks[i];
    var marker = new google.maps.Marker({
      position: {
        lat: task[1],
        lng: task[2]
      },
      map: map,
      title: task[0],
      url: "somesite?ID=" + task[3]
    });
    gmarkers.push(marker);
    marker.addListener('click', function() {
      window.location.href = this.url;
    });

  }
}
google.maps.event.addDomListener(window, 'load', initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  background-color: white;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id='map'></div>