根据缩放级别更改图标

如何根据Google地图缩放级别更改图标的高度和宽度？

我正在使用Google Maps api v3。

Answer 1

您应该能够根据文档为缩放更改添加侦听器。 它没有通过任何东西，但你可以通过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 ) ); });