根据缩放 Google 地图 v3 调整标记大小

Posted 2023-02-23

【中文标题】根据缩放 Google 地图 v3 调整标记大小

【英文标题】：Resize markers depending on zoom Google maps v3

【发布时间】：2011-03-17 22:16:20

【问题描述】：

我有一个在 v3 API 上运行的 Google 地图，我添加了一些自定义标记，是否可以根据地图的缩放级别使它们缩放？ 我尝试搜索参考，但似乎找不到任何调整 MarkerImage 大小的方法。

也许我必须删除地图更改缩放的所有标记并创建不同大小的新标记？

【参考方案1】：

不幸的是，您必须每次都设置图标。但是，您可以预先定义它们，然后将它们应用到标记上。

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

【讨论】：

您也可以将其与 zoom_changed 事件挂钩，例如：google.maps.event.addListener(map, "zoom_changed", function() var zoom = map.getZoom(); //根据当前缩放做一些事情);

【参考方案2】：

每次缩放地图时，此代码都会调整大小，使其始终覆盖相同的地理区域。

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

【讨论】：

感谢您的成功！我也喜欢扩展以覆盖地理部分的额外步骤。但是对我来说标记是象征性的，所以我只是在 map.getZoom() 上使用了比较条件来适当地缩放它们。

感谢您的代码。显然 MarkerImage 已被弃用并删除。现在使用这个 -> developers.google.com/maps/documentation/javascript/…

【参考方案3】：

要向地图添加遵循缩放级别的图像，请使用 GroundOverlay。

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