响应SVG标记图标

我有一张地图（example here），具有自定义SVG图标标记：响应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，但这不是我正在搜索的东西。

来源

2016-07-29 Jordi Castilla

您尝试过使用[google.maps.Circle]（https://developers.google.com/maps/documentation/javascript/shapes#circles）对象吗？他们有一个固定的物理尺寸（以米为单位的半径） – geocodezip

uhmm ... @geocodezip听起来有趣，我会检查，但是......这仅仅是一个示例，我们将添加更多详细的矢量图标，如杯啤酒形状如果可能的话...... –

一种选择是用缩放来调整SVG图标的比例，但如果您有很多标记，则会影响性能。 – geocodezip

从你的初始化方法你可以调用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; 
    }); 
}

来源

2016-07-31 16:07:06 Joyson

响应SVG标记图标

回答

相关问题