javascript - google maps api 3 在缩放级别事件上更改自定义图标大小

Question

我正在努力将图标缩放级别更改功能应用于我的 google maps 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

我向您的 map 添加了一个“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(image) 遍历所有标记并设置传递给它的图像。