谷歌地图（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

    });
});

但是我该如何正确地“隐藏”标记图标（它只是“图标”，而不是整个标记） ？ 这样我就只能单独显示 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>

如果您需要使用labelOrigin并且不想在更改图标的比例时看到标签跳转，则另一种选择是更改图标fillOpacity 。

Answer 2

这应该有效：

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