javascript - 谷歌地图中的响应式 svg 标记图标

Question

我有一张 map ( example here )，带有自定义的 svg 图标标记:

var icon = {
  path: "M-10,0a10,10 0 1,0 20,0a10,10 0 1,0 -20,0",
  fillColor: '#FF0000',
  fillOpacity: .6,
  anchor: new google.maps.Point(0, 0),
  strokeWeight: 0,
  scale: 1
}

如果放大 map ，您会发现图标的大小是不可变的，

有没有办法在缩放时调整其大小？ (放大使图标变大，缩小使图标变小)

• 我已经找到了如何使 svg 图标具有响应性，但这迫使我将 svg 添加到元素中并使用 css。
• 如果我在 map 上有很多标记，我知道我可以 group them ，但这不是我要搜索的内容。

Answer 1

从初始化方法中，您可以调用 setZoomChangedEvent 方法，如下所示。这只是为了概念证明。您需要根据缩放级别决定所需的比例，并更改 if-else-if 梯形内的变量“scale”的值。该方法在每次缩放更改时检查缩放级别，并根据缩放计算比例。正如 geocodezip 在评论中提到的，如果 map 上有很多标记，可能会对性能产生影响。

function setZoomChangedEvent()
{
    var prevscale = 3;
    var scale = 0;
    google.maps.event.addListener(map, 'zoom_changed', function() {

        var zoom = map.getZoom();

        if(zoom < 3)
        {
            scale = 2;
        }
        else if(zoom < 5 )
        {
            scale = 3;
        }
        else if(zoom < 10)
        {
            scale = 4;
        }
        else if(zoom < 15)
        {
            scale = 5;
        }
        else if(zoom < 20)
        {
            scale = 6;
        }

        if(scale!=prevscale)
        {
            var len = markers.length;
            for(var j=0; j<len; j++)
            {
                var icon = markers[j].getIcon();
                if(icon.hasOwnProperty("scale"))
                {
                    icon.scale = scale;
                    markers[j].setIcon(icon);
                }   
            }
        }
        prevscale = scale;
    });
}