Question

我有一张地图（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
}

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

有一种方法可以在缩放时调整大小吗？（放大使图标变大，缩小变小）

我发现如何使svg图标响应，但这迫使我将svg添加到元素中并使用css。
如果我在地图中有很多标记，我知道我可以group them，但这不是我正在搜索的内容。

Answer 1

从初始化方法中，您可以调用setZoomChangedEvent方法，如下所示。这只是为了证明概念。您需要根据缩放级别决定所需的比例，并在if-else-if梯形图中更改变量“scale”的值。每次更改变焦时，该方法都会检查缩放级别，并根据缩放计算比例。正如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;
    });
}

在googlemaps的响应svg标记图标

1 个答案: