根据缩放级别更改图标答案

【问题标题】：Changing icon based on zoom level根据缩放级别更改图标
【发布时间】：2011-10-26 05:05:56
【问题描述】：

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

我正在使用 Google Maps api v3。

【问题讨论】：

以某种方式处理一些 onzoom 事件，然后只是更改图标？不知道，不要使用 v3...

标签： javascript jquery google-maps google-maps-api-3

【解决方案1】：

这是我最终使用的代码：

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

【讨论】：

请注意，确保新的宽度和高度不低于 0，否则会出现一些令人讨厌的 javascript 错误 :) 始终确保图标的宽度和高度至少为 1
现在 MarkerImage 只是 Icon，因为 Google Maps API 3.11。很酷你已经命名了对象的字段，例如scaledSize。见：developers.google.com/maps/documentation/javascript/…

【解决方案2】：

您应该能够为每个the docs 添加缩放更改的侦听器。它不会传递任何东西，但您可以通过 api 获取属性。

google.maps.event.addListener(map, 'zoom_changed', function() {
    zoomLevel = map.getZoom();
    //this is where you will do your icon height and width change.     
  });

【讨论】：

但是，如何更改图标的宽度和高度？
您要更改哪个图标？
嗨，Amin，我不知道如何更改图标的宽度/高度。
您可以获取/设置 markerOptions (developers.google.com/maps/documentation/javascript/…)，实际图标可以通过使用 google.maps.Icon (developers.google.com/maps/documentation/javascript/…) 而不是图像来创建。 google.maps.Icon 有 2 个不错的小属性 scaledSize 和 size。您可以将上面的答案和此技术混合在一起，以根据缩放更改图标，同时仅使用 1 张图像。
嘿，我已经尝试了您上面提到的方法，但没有成功。你在这方面有过成功吗？

【解决方案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
        )
    );        
});

【讨论】：