如何动态设置谷歌地图标记大小

How to set Google maps marker size dynamically

本文关键字：图标 地图 谷歌 设置 何动态 动态      更新时间：2023-11-30

我试图通过缩放来调整标记的大小，但似乎不起作用

function Icon(url) {
    this.url = url;
    this.scaledSize = new google.maps.Size(30, 30); // scaled size
    //this.origin = new google.maps.Point(0,0); // origin
    //this.anchor = new google.maps.Point(0, 0); // anchor
}
var icon1 = new Icon('img/marker-test.png');
        map.addListener('zoom_changed', function() {
        if(map.zoom === 18){
            //marker.setIcon(test);
            console.log('check');
            marker.scaledSize = new google.maps.Size(300, 300);
        } else {
            //marker.setIcon(icon1);
        }
    });

有人知道怎么解决这个问题吗？

在我回答之前，有几个建议：

  • 您使用了无效的map.zoom === 18。应该是map.getZoom() === 18

  • marker.scaledSize无效，因为scaledSize是Icon对象的属性。参考：图标对象规范

    如果需要动态设置标记大小，则需要通过图标属性指定标记图像（在创建标记时），而不是作为字符串或留空（以显示默认标记）。

缩放在默认标记上不起作用。因此，您需要为标记提供自己的自定义图像。

规模与大小

缩放变换标记图像，大小指定图像的画布大小。设置小标记图像的大小属性不会显示标记图像的任何缩放效果。但是，如果标记图像足够大，并且它以前是用缩小比例绘制的，则放大效果良好。

如果只缩放图像而不设置大小，则标记图像将放大预先指定的大小。也就是说，标记图像的某些部分将不可见。

简单地说，这里有一把小提琴。尝试将缩放比例更改为18及以上，然后再更改为15及以下。

尝试使用正确的getZoom映射方法。

if (map.getZoom() === 18) {
    ...
}

https://developers.google.com/maps/documentation/javascript/reference#Map

相关文章：