響應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標記圖標

回答

相關問題