Google 地图 (Javascript API)：标记在图标和标签之间切换？

Question

我知道我们可以根据某些事件在标记上做一些事情，例如：

// var markers: stored somewhere above

map.addListener('zoom_changed', function() {

    /**
     * After if/else checking zoom_level , etc
     * then:
     */
    markers.forEach(function(marker){

        marker.setOptions({
            label: {
                text: 'Something else',
                color: '#ff0000',
            }
        }); //Change label text/color etc
        marker.setIcon(url); //Change Icon

    });
});

但是如何才能真正正确地 "hide" 标记图标（它只是 "Icon"，而不是整个标记） 好吗？以至于我只能单独展示Label。（根据情况在标记 图标与标签 之间切换）

我尝试了下面的所有方法，但都不起作用：

marker.setIcon(null);
marker.setIcon('');
marker.setIcon(' ');

Answer 1

您可以使用自定义标记图标来实现，因为您可以缩放图标，但不会缩放标签。

放大和缩小下面的代码片段以查看行为。

var marker;

function initialize() {

  var myLatLng = new google.maps.LatLng(0, 0);
  var mapOptions = {
    zoom: 5,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoomControl: true
  };

  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    label: 'HELLO WORLD',
  });

  setIconWithScale(marker, 0);

  google.maps.event.addListener(map, 'zoom_changed', function() {

    if (map.getZoom() >= 6) {

      setIconWithScale(marker, 1);

    } else {

      setIconWithScale(marker, 0);
    }
  });
}

function setIconWithScale(marker, scale) {

  marker.setIcon({
    path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
    fillColor: '#FF0000',
    fillOpacity: .6,
    anchor: new google.maps.Point(0, 0),
    strokeWeight: 0,
    labelOrigin: new google.maps.Point(0, 30),
    scale: scale
  });
}

#map-canvas {
  height: 180px;
}

<div id="map-canvas"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize">
</script>

另一个选择是更改图标 fillOpacity 如果您需要使用 labelOrigin 并且不希望在更改图标比例时看到标签跳跃。

Answer 2

这应该有效：

marker.setIcon({
    scale: <int>
});

Google 地图 (Javascript API)：标记在图标和标签之间切换？

Google Maps (Javascript API): Markers toggle between Icon and Label?

javascript

google-maps

google-maps-api-3

google-maps-markers