缩小时防止标记缩放

Question

我希望 Google 地图标记在特定缩放级别上具有固定大小，如本例所示：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更流畅的解决方案呢？

Answer 1

根据你的评论：是的，你可以用标记解决它，但是MarkerOptions中没有'ready-to-use'选项。取而代之的是，您可以添加缩放更改侦听器并为标记图标设置新的比例。而不是 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)
    });
});

当然，您可以更改计算方式，使图标大小以不同的方式变化。我刚刚创建了一个简单的例子。我刚刚更新了 your fiddle.

缩小时防止标记缩放

Prevent marker from scaling when zoom out

javascript

google-maps-api-3

google-maps-markers