1

アイコンのズーム レベル変更機能を 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();
                }
            }
        }

    }
    });
});


私はこのレベルのスクリプティングが本当に得意ではありません。ポインターのアイデアやヘルプがあれば、感謝します。

ジョシュ

4

1 に答える 1

4

ズーム レベルに応じてすべてのマーカー アイコンを変更する「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) は、すべてのマーカーを繰り返し処理し、渡す画像を設定します。

于 2012-11-19T14:52:47.633 に答える