通過SVG路徑自定義谷歌地圖標記

-2

我目前使用紅色圓圈作爲從另一個StackOverflow貼子上拾取的SVG路徑的谷歌地圖標記。通過SVG路徑自定義谷歌地圖標記

new google.maps.Marker({ 
    map:map, 
    icon:{ 
     path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0", 
     fillColor: '#ff0000', 
     fillOpacity: .6, 
     anchor: new google.maps.Point(0,0), 
     strokeWeight: 0, 
     scale: 1 
    } 
});

我想修改本和借鑑我的標記爲空紅色正方形與正方形的邊框向外延伸的白色緯度&排長隊，所以它看起來有點更有趣，像這個小品從Adobe Photoshop：

我不太清楚如何處理我目前的圖標來實現這個結果（在白色兩條線紅色的一個正方形，好像我需要3個不同的圖標，雖然我不知道如何將直線從正方形的邊緣向外延伸到地圖的邊緣。）任何幫助將不勝感激。

來源

2017-08-26 arby

如果這只是一個用標記寫成的香草圖，那麼你的概念至少需要2條路徑（如果它們都是相同的顏色，你可以用一條路徑來完成）。但它不清楚，如果這個符號定義一個svg -

icon:{ 
    path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0", 
    fillColor: '#ff0000', 
    fillOpacity: .6, 
    anchor: new google.maps.Point(0,0), 
    strokeWeight: 0, 
    scale: 1 
}

會允許多個路徑。我只是嘗試在當前的路徑下添加額外的路徑。

「延長線條」最簡單的方法就是讓它們的寬度至少是屏幕寬度的兩倍，所以即使將圖標拖動到屏幕的邊緣，它們也總是可見的。一種粗略的解決方案，但它會工作（假設谷歌地圖不修復SVG的視圖屬性）。這樣做的方式將涉及svg過濾器和/或剪輯路徑（https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path），但我懷疑谷歌地圖圖標將允許此類功能。

下面顯示的單路徑解決方案 - 紅色方形的解決方案類似，只需將紅色方形與灰色方形部分重疊，並使灰色方形部分略微「變薄」，以便它不會從紅色

來源

2017-08-26 20:34:40 diopside

通過SVG路徑自定義谷歌地圖標記

回答

相關問題