googlemaps中的响应svg标记图标

Question

我有一张地图(这里的例子)，带有定制的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
}

如果你放大地图，你会发现图标的大小是不变的，

​

​

有办法在缩放时调整尺寸吗？(放大使图标变大，缩小)

• 我已经找到了如何使svg图标响应，但这迫使我将svg添加到元素中并使用css。
• 如果我在地图上有很多标记，我知道我可以把他们分组，但这不是我要搜索的。

Answer 1

从初始化方法中，您可以调用setZoomChangedEvent方法，如下所示。这只是为了证明概念。你将需要决定你想要的比例，取决于缩放级别，并改变变量“比例”的值，如果-否则-如果梯子。该方法在每次变焦时检查缩放级别，并根据缩放值计算缩放比例。正如geocodezip在注释中提到的，如果地图上有很多标记，可能会对性能产生影响。

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