谷歌地图隐藏标记标签答案

【问题标题】：Google Maps Hiding Marker Labels谷歌地图隐藏标记标签
【发布时间】：2021-01-31 20:00:57
【问题描述】：

有没有办法在我创建标记标签后隐藏它们？我研究并找到了 MarkerWithLabel，但我不想使用第三个库。

像这样在标记内创建标签

new google.maps.Marker({ label:{text:'test',color:'black'} });

我想用复选框隐藏和显示它们。

【问题讨论】：

标签： javascript google-maps-api-3 google-maps-markers

【解决方案1】：

要隐藏标签，请致电marker.setLabel("");

要恢复它，请将原始值保存在marker 的另一个属性中（例如_label），并在复选框值更改时使用它来设置值：

google.maps.event.addDomListener(document.getElementById('chkbx'), 'click', function() {
  var checked = document.getElementById('chkbx').checked;
  if (!checked) {
    // remove the labels
    for (var i=0; i<markers.length; i++)
      markers[i].setLabel("");
  } else {
    for (var i=0; i<markers.length; i++)
      markers[i].setLabel(markers[i]._label);
  }
});

proof of concept fiddle

代码 sn-p：

var geocoder;
var map;
var markers = [];

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  // Mountain View, CA, USA (37.3860517, -122.0838511)
  var marker1 = createMarker({
    lat: 37.3860517,
    lng: -122.0838511
  }, "Mountain View, CA", "A");
  // Palo Alto, CA, USA (37.4418834, -122.14301949999998)
  var marker2 = createMarker({
    lat: 37.4418834,
    lng: -122.14301949999998
  }, "Palo Alto", "B");
  // Stanford, CA, USA (37.42410599999999, -122.1660756)
  var marker3 = createMarker({
    lat: 37.42410599999999,
    lng: -122.1660756
  }, "Stanford, CA", "C");
  var bounds = new google.maps.LatLngBounds();
  bounds.extend(marker1.getPosition());
  bounds.extend(marker2.getPosition());
  bounds.extend(marker3.getPosition());
  map.fitBounds(bounds);
  google.maps.event.addDomListener(document.getElementById('chkbx'), 'click', function() {
    var checked = document.getElementById('chkbx').checked;
    if (!checked) {
      // remove the labels
      for (var i = 0; i < markers.length; i++)
        markers[i].setLabel("");
    } else {
      for (var i = 0; i < markers.length; i++)
        markers[i].setLabel(markers[i]._label);
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);

function createMarker(latLng, text, label) {
  var marker = new google.maps.Marker({
    position: latLng,
    map: map,
    label: {
      text: label,
      color: "white"
    },
    _label: {
      text: label,
      color: "white"
    }
  });
  markers.push(marker);
  return marker;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

#map_canvas {
  height: 90%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input type="checkbox" id="chkbx" name="chkbx" checked="checked" />toggle marker labels
<div id="map_canvas"></div>

【讨论】：