开发者

Resize markers depending on zoom Google maps v3

开发者 https://www.devze.com 2023-01-07 17:37 出处:网络
I have a Google map running on the v3 API, I added some custom markers, is it possible to make them scale depending on the zoom level of the map?

I have a Google map running on the v3 API, I added some custom markers, is it possible to make them scale depending on the zoom level of the map? I开发者_如何学Python tried searching the reference but can't seem to find any methods to resize a MarkerImage.

Maybe I have to remove markers everything the map changes zoom and create new markers in a different size?


This code will resize every time the map is zoomed so it always covers the same geographic area.

//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
        )
    );        
});


Unfortunately, you would have to setIcon every single time. However, you can pre-define them, and then just apply them to the marker.

zoomIcons = [null, icon1, icon2];  // No such thing as zoom level 0. A global variable or define within object.
marker.setIcon(zoomIcons[map.getZoom()]);


To add to the map an image that follows the zoom level, use a GroundOverlay.

https://developers.google.com/maps/documentation/javascript/groundoverlays

0

精彩评论

暂无评论...
验证码 换一张
取 消