[英]Prevent marker from scaling when zoom out
我希望Google Maps标记在某个缩放级别上具有固定大小,例如本例: http : //jsfiddle.net/bryan_weaver/4rxqQ/
function initialize() {
var map;
var centerPosition = new google.maps.LatLng(38.713107, -90.42984);
var options = {
zoom: 9,
center: centerPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map')[0], options);
var icon = 'https://www.google.com/mapfiles/marker_black.png';
var iconBounds = constructBounds(38.713107, -90.42984);
var staticOverlay = new google.maps.GroundOverlay(icon, iconBounds);
staticOverlay.setMap(map);
}
function constructBounds(lat, lng){
var sw = new google.maps.LatLng(lat - .03, lng - .025)
var ne = new google.maps.LatLng(lat + .03, lng + .025)
return new google.maps.LatLngBounds(sw, ne);
}
google.maps.event.addDomListener(window, 'load', initialize);
但是,有没有一种比上面的Jsfiddle更流畅的解决方案?
根据您的评论:是的,您可以使用标记来解决它,但是MarkerOptions中没有“即用型”选项。 代替此,您可以添加缩放更改侦听器并为标记图标设置新的比例。 代替GroundOverlay
var icon = 'https://www.google.com/mapfiles/marker_black.png';
var iconBounds = constructBounds(38.713107, -90.42984);
var staticOverlay = new google.maps.GroundOverlay(icon, iconBounds);
staticOverlay.setMap(map);
你会用一个标记
var icon = 'https://www.google.com/mapfiles/marker_black.png';
var marker = new google.maps.Marker({
position: {
lat: 38.713107,
lng: -90.42984
},
map: map,
icon: icon
});
然后,您只需添加缩放更改侦听器并根据缩放级别计算新的大小:
//add a zoom change listener, so you can resize the icon based on the zoom level
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom = map.getZoom();
markerWidth = (zoom/9)*20
markerHeight = (zoom/9)*34
//set the icon with the new size to the marker
marker.setIcon({
url: icon,
scaledSize: new google.maps.Size(markerWidth, markerHeight)
});
});
当然,您可以更改计算方式,以使图标大小以其他方式更改。 我只是创建了一个简单的示例。 我刚刚更新了你的小提琴 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.