Изменение маркера при определенном уровне масштабирования - API Карт Google 3

Question

У меня есть карта, которая загружает и отображает (правильно) кучу маркеров. Количество маркеров не ограничено, поэтому они создаются до инициализации карты, запустив немного PHP в javascript (маркеры поступают из базы данных).

Я хочу знать, можно ли изменить маркер с простой точки, на что-то еще, когда достигнут определенный уровень масштабирования?

Вот код:

<script> 
    var <?php echo $clinic_string; ?>; //string with marker names 
    var map; 

    function initialize() { 
     var kzn = new google.maps.LatLng(-28.459033,30.217037); 
     var mapOptions = { 
      zoom: 7, 
      center: kzn, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

     <?php foreach($jsdata as $data) : ?> 
      marker_<?php echo $data['id'];?> = new google.maps.Marker({ 
       position: new google.maps.LatLng(<?php echo $data['location'];?>), 
       map: map, 
       icon: 'images/reddot.gif' 
      }); 
     <?php endforeach; ?> 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

Допустим, мой уровень масштабирования достигает 15 уровня, он должен изменить icon к images/clinic.gif.

Возможно ли это? И если да, то как я могу это достичь?

Answer 1

Не слишком сложно. Вам необходим прослушиватель событий для события zoom_changed объекта map. И вы можете изменить значки маркеров, используя функцию setIcon маркера. Что-то вроде:

<?php foreach($jsdata as $data) : ?> 
     marker_<?php echo $data['id'];?> = new google.maps.Marker({ 
      position: new google.maps.LatLng(<?php echo $data['location'];?>), 
      map: map, 
      icon: 'images/reddot.gif' 
     }); 

     map.addListener('zoom_changed', function() { 
      if (map.getZoom() >= 15) { 
       marker_<?php echo $data['id'];?>.setIcon('images/clinic.gif'); 
      } else { // assuming you want to change it back if they zoom back out 
       marker_<?php echo $data['id'];?>.setIcon('images/reddot.gif'); 
      } 
     }); 
    <?php endforeach; ?> 

На самом деле, а не иметь X число «zoom_changed» слушателей событий, я думаю, что я предпочел бы иметь один массив для всех моих маркеров. Тогда просто есть одна функция прослушивателя событий, которая перебирает все эти маркеры.

markers = []; 

    <?php foreach($jsdata as $data) : ?> 
     marker_<?php echo $data['id'];?> = new google.maps.Marker({ 
      position: new google.maps.LatLng(<?php echo $data['location'];?>), 
      map: map, 
      icon: 'images/reddot.gif' 
     }); 

     markers.push(marker_<?php echo $data['id'];?>); 
    <?php endforeach; ?> 

    map.addListener('zoom_changed', function() { 
     var image; 
     if (map.getZoom() >= 15) { 
      image = 'images/clinic.gif'; 
     else { // assuming you want to change it back if they zoom back out 
      image = 'images/reddot.gif'; 
     } 

     for (var i = 0; i < markers.length; i++) { 
      markers[i].setIcon(image); 
     } 
    });