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

保存对数组中标记的引用。在地图上创建'zoom_changed'监听器，当它执行时，如果缩放是＆lt; = 7则处理隐藏标签的标记数组（将其设置为null），如果缩放则显示标签（将其设置为等于标题）是> 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>

根据缩放级别显示标签

1 个答案: