ズームレベルに基づいてアイコンを変更する

Question

Googleマップのズームレベルに基づいて、アイコンの高さを&の幅に変更するにはどうすればよいですか？

私はGoogle Maps API v3を使用しています。

Answer 1

the docsのズーム変更にリスナーを追加できるはずです。それは何も渡されませんが、あなたはAPIを介してプロパティを得ることができます。

google.maps.event.addListener(map, 'zoom_changed', function() { 
    zoomLevel = map.getZoom(); 
    //this is where you will do your icon height and width change.  
    }); 

Answer 2

これは私が最終的に使用するコードです：

google.maps.event.addListener(google_map, 'zoom_changed', function() { 
    var z = google_map.getZoom(); 

    _.each(map_shapes, function(s) { 

     if (! $.isFunction(s.shape.getPosition)) return; 

     var w = s.shape.getIcon().size.width; 
     var h = s.shape.getIcon().size.height; 

     s.shape.setIcon(new google.maps.MarkerImage(
      s.shape.getIcon().url, null, null, null, new google.maps.Size(
       w - Math.round(w/3 * (last_zoom - z)), 
       h - Math.round(h/3 * (last_zoom - z))) 
      ) 
     ); 

    }); 

    last_zoom = z; 
}); 

Answer 3

アイコンが同じ地理的な大きさであるように、このコードは、たびに、ズームレベルの変更をアイコンのサイズを変更します。

//create a marker image with the path to your graphic and the size of your graphic 
var markerImage = new google.maps.MarkerImage(
    'myIcon.png', 
    new google.maps.Size(8,8), //size 
    null, //origin 
    null, //anchor 
    new google.maps.Size(8,8) //scale 
); 

var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(38, -98), 
    map: map, 
    icon: markerImage //set the markers icon to the MarkerImage 
}); 

//when the map zoom changes, resize the icon based on the zoom level so the marker covers the same geographic area 
google.maps.event.addListener(map, 'zoom_changed', function() { 

    var pixelSizeAtZoom0 = 8; //the size of the icon at zoom level 0 
    var maxPixelSize = 350; //restricts the maximum size of the icon, otherwise the browser will choke at higher zoom levels trying to scale an image to millions of pixels 

    var zoom = map.getZoom(); 
    var relativePixelSize = Math.round(pixelSizeAtZoom0*Math.pow(2,zoom)); // use 2 to the power of current zoom to calculate relative pixel size. Base of exponent is 2 because relative size should double every time you zoom in 

    if(relativePixelSize > maxPixelSize) //restrict the maximum size of the icon 
     relativePixelSize = maxPixelSize; 

    //change the size of the icon 
    marker.setIcon(
     new google.maps.MarkerImage(
      marker.getIcon().url, //marker's same icon graphic 
      null,//size 
      null,//origin 
      null, //anchor 
      new google.maps.Size(relativePixelSize, relativePixelSize) //changes the scale 
     ) 
    );   
});