Карты Google (Javascript API): маркеры переключаются между значком и меткой? - PullRequest
Новая
       302

Карты Google (Javascript API): маркеры переключаются между значком и меткой?

0 голосов
/ 07 марта 2019

Я знаю, что мы можем делать некоторые вещи на маркерах при некоторых событиях, например: 

// 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

    });
});

Но как мне на самом деле правильно "скрыть" значок маркера (это только "значок", а невесь маркер) пожалуйста?Так что я мог показать только Лейбл один.(Переключение между маркером значками и ярлыками , в зависимости от ситуации)

Я пробовал все перечисленные ниже, но на самом деле не работает: 

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

1 Ответ

0 голосов
/ 07 марта 2019

Вы можете сделать это с помощью пользовательского значка маркера , поскольку вы можете масштабировать значок, который не будет масштабировать этикетку.

Увеличьте и уменьшите фрагмент кода ниже, чтобы увидетьповедение. 

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 и вы не хотите видеть меткупри изменении масштаба иконки.

...