根据缩放级别显示标签

Question

根据缩放级别，我想显示或隐藏标记的标签，我在这里查看了答案，同时我对我的意图有了更好的了解我没有任何运气能够将它实现到我的 google 地图中。标签应仅在缩放级别 >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

将对标记的引用保存在一个数组中。在地图上创建一个 '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>

根据缩放级别显示标签

Show label based on zoom level

javascript

google-maps-api-3

google-maps-markers