Javascript 基于缩放级别更改图标
如何根据谷歌地图的缩放级别更改图标的高度和宽度Javascript 基于缩放级别更改图标,javascript,jquery,google-maps,google-maps-api-3,Javascript,Jquery,Google Maps,Google Maps Api 3,如何根据谷歌地图的缩放级别更改图标的高度和宽度 我正在使用Google Maps api v3。您应该能够在缩放更改上添加一个侦听器。它不会传递任何消息,但是您可以通过api获取属性 google.maps.event.addListener(map, 'zoom_changed', function() { zoomLevel = map.getZoom(); //this is where you will do your icon height and width chan
我正在使用Google Maps api v3。您应该能够在缩放更改上添加一个侦听器。它不会传递任何消息,但是您可以通过api获取属性
google.maps.event.addListener(map, 'zoom_changed', function() {
zoomLevel = map.getZoom();
//this is where you will do your icon height and width change.
});
这是我最终使用的代码:
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;
});
此代码将在每次缩放级别更改时更改图标的大小,以使图标具有相同的地理大小
//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
)
);
});
处理一些onzoom事件,然后只更改图标?Dunno,不使用v3…但是,我如何更改图标的宽度和高度?您要更改哪个图标?嘿,阿明,我不知道如何更改图标的宽度/高度。您可以获取/设置标记选项(),实际的图标可以使用google.maps.icon()而不是图像创建。这个google.maps.Icon有两个很好的小属性scaledSize和size。你可以把上面的答案和这项技术混合在一起,在缩放的基础上改变图标,同时只使用一张图片。嘿,多蒂,我试过你上面提到的方法,但没有成功。你成功地做到了吗?请注意,确保你的新宽度和高度不低于0,否则会出现一些严重的javascript错误:)始终确保图标的宽度和高度至少为1现在
MarkerImage
只是Icon
,因为Google Maps API 3.11。很酷,您已经命名了对象的字段,例如scaledSize
。见: