谷歌地圖api 3更改縮放級別事件時的自定義圖標大小

Question

我正在努力將圖標縮放級別更改功能應用到我的谷歌地圖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（圖像）通過所有的標記進行迭代，並且將您傳遞給它的圖像。