google maps api 3 줌 레벨 이벤트시 사용자 정의 아이콘 크기 변경

Question

Google지도 API 스크립트에 아이콘 줌 레벨 변경 기능을 적용하는 데 어려움을 겪고 있습니다.

내 아이콘 크기는 48px이고 실제 그래픽 크기는 48px입니다.

jsfiddle.net/motocomdigital/hQkb3/6

이 같은 결정 ...

var image = new google.maps.MarkerImage(
    '<?php bloginfo('template_url'); ?>/images/marker-images/image-48px.png', 
    new google.maps.Size(48,48), 
    new google.maps.Point(0,0), 
    new google.maps.Point(24,48) 
); 

나는이 크기와 그래픽은 3 줌 레벨에 따라 변경할 수 있습니다 생각하지 않는다?

은 줌에 예컨대

...

줌 레벨 0> 6 -

사용

'<?php bloginfo('template_url'); ?>/images/marker-images/image-12px.png', 
    new google.maps.Size(12,12), 
    new google.maps.Point(0,0), 
    new google.maps.Point(6,6) 

...

줌 레벨 6> 8 - 용도 ...

'<?php bloginfo('template_url'); ?>/images/marker-images/image-24px.png', 
    new google.maps.Size(24,24), 
    new google.maps.Point(0,0), 
    new google.maps.Point(12,12) 

줌 레벨 8 이상은 -

정말 아니다 ... 사용

'<?php bloginfo('template_url'); ?>/images/marker-images/image-48px.png', 
    new google.maps.Size(48,48), 
    new google.maps.Point(0,0), 
    new google.maps.Point(24,24) 

이 아래 내 원래 스크립트입니다 ...

jQuery(function($){ 

    var image = new google.maps.MarkerImage(
     '<?php bloginfo('template_url'); ?>/images/marker-images/image.png', 
     new google.maps.Size(48,48), 
     new google.maps.Point(0,0), 
     new google.maps.Point(24,24) 
    ); 

    $('#map_div').gmap3({ 
     action:'init', 
     options: { 
      center:[<?php echo $lt;?>,<?php echo $lo;?>], 
      zoom: 7, 
      scrollwheel: false 
     } 
    }, 
    { 
     action: 'addMarkers', 
     markers: [ <?php echo $lat_long;?> ], 
     marker: { 
      options: { 
       draggable: false, 
       icon: image    
      }, 
      events:{ 
      mouseover: function(marker, event, data){ 
       var map = $(this).gmap3('get'), 
        infowindow = $(this).gmap3({ action:'get', name:'infowindow' }); 
       if (infowindow) { 
        infowindow.open(map, marker); 
        infowindow.setContent(data); 
       } else { 
        $(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: data}}); 
       } 
      }, 
      mouseout: function(){ 
       var infowindow = $(this).gmap3({ action:'get', name:'infowindow' }); 
       if (infowindow){ 
        infowindow.close(); 
       } 
      } 
     } 

    } 
    }); 
}); 

이 수준의 스크립팅과 훌륭한 포인터 아이디어 또는 도움은 큰 감사 일 것입니다.

조쉬

Answer 1

나는 줌 레벨에 따라 모든 마커 아이콘을 변경지도에 "ZOOM_CHANGED"이벤트를 추가했습니다.

function UseMarkerIcon(imageObj) 
{ 
    var markers=$("#map_div").gmap3({action:'get',name:'marker',all:true}); 
    $.each(markers, function(i,marker) 
    { 
    marker.setIcon(imageObj); 
    }); 
} 

jQuery(function($) {  
    var image12px = new google.maps.MarkerImage('http://motocomdigital.co.uk/assets/marker-images/map-marker-12px.png', new google.maps.Size(12, 12), new google.maps.Point(0, 0), new google.maps.Point(6, 6));  
    var image24px = new google.maps.MarkerImage('http://motocomdigital.co.uk/assets/marker-images/map-marker-24px.png', new google.maps.Size(24, 24), new google.maps.Point(0, 0), new google.maps.Point(12, 12));  
    var image48px = new google.maps.MarkerImage('http://motocomdigital.co.uk/assets/marker-images/map-marker-48px.png', new google.maps.Size(48, 48), new google.maps.Point(0, 0), new google.maps.Point(24, 24)); 

    $('#map_div').gmap3({ 
     action: 'init', 
     options: { 
      center: [50.799019, -1.132037], 
      zoom: 5, 
      scrollwheel: false 
     }, 
       events:{ 
         zoom_changed: function(map){ 
          var zoomLevel = map.getZoom(); 

          if (zoomLevel < 6) 
          UseMarkerIcon(image12px); 
          else if (zoomLevel >= 6 && zoomLevel <=8) 
          UseMarkerIcon(image24px); 
          else 
          UseMarkerIcon(image48px); 
         } 
       } 
    }, { 
     action: 'addMarkers', 
     markers: [{ 
      lat: 50.799019, 
      lng: -1.132037, 
      data: 'Test One'}, 
     { 
      lat: 50.365162, 
      lng: -4.712017, 
      data: 'Test Two'}, 
     { 
      lat: 54.518726, 
      lng: -5.881054, 
      data: 'Test Three'}, 
     { 
      lat: 52.780964, 
      lng: -1.211863, 
      data: 'Test Four'}, 
     { 
      lat: 51.433998, 
      lng: -2.549690, 
      data: 'Test Five'}], 
     marker: { 
      options: { 
       draggable: false, 
       icon: image12px 
      }, 
      events: { 
       mouseover: function(marker, event, data) { 
        var map = $(this).gmap3('get'), 
         infowindow = $(this).gmap3({ 
          action: 'get', 
          name: 'infowindow' 
         }); 
        if (infowindow) { 
         infowindow.open(map, marker); 
         infowindow.setContent(data); 
        } else { 
         $(this).gmap3({ 
          action: 'addinfowindow', 
          anchor: marker, 
          options: { 
           content: data 
          } 
         }); 
        } 
       }, 
       mouseout: function() { 
        var infowindow = $(this).gmap3({ 
         action: 'get', 
         name: 'infowindow' 
        }); 
        if (infowindow) { 
         infowindow.close(); 
        } 
       } 

      } 

     } 
    }); 
}); 

UseMarkerIcon (이미지) 기능은 모든 마커를 반복하여 전달하는 이미지를 설정합니다.