谷歌地圖自定義標記
[英]google maps customizing marker
問題描述
I am new to google Maps,and planning to use customized marker which will have
arrow pointer surrounded with circle icon based on the movement I want to rotate
marker.
如自定義標記的文檔中所述，我可以使用 SVG 路徑作為標記符號。 這是我的 SVG 內聯代碼。
<!DOCTYPE html>
<html>
<body>
<svg height="210" width="500">
<circle cx="14" cy="11" r="9" stroke-width="2" fill="#8dc73f" />
<line x1="14" y1="16" x2="14" y2="6" style="stroke: white;stroke-width:2" />
<line x1="10" y1="10" x2="14" y2="6" style="stroke: white;stroke-width:2" />
<line x1="18" y1="10" x2="14" y2="6" style="stroke: white;stroke-width:2" />
</svg>
</body>
</html>
我不知道為上述 SVG 代碼生成路徑。 Google Markers 將嚴格只接受 PATH。
Is there any way I can generate a path for the SVG inline code.
或者
Is there any other possible approach I can customize the marker in the HTML
content and render into the map?
1 個解決方案
解決方案1
1 已采納 2016-03-21 20:39:42
可以使用 moveto (M) 命令和 lineto (L) 命令將線元素轉換為路徑數據。 例如，d="M x1 y1 L x2 y2"。
可以使用 moveto (M) 命令和兩個橢圓弧 (A) 命令將圓元素轉換為路徑數據。 例如，d="M cx (cy-r) A rr 0 1 0 cx (cy+r) A rr 0 1 0 cx (cy-r)"。 換句話說，您可以將圓分成兩個半圓弧。
請注意，您不能使用單個橢圓弧 (A) 命令繪制完整的圓，因為如果圓弧的端點相同，那么將有無數可能的弧滿足橢圓弧 (A) 的其余參數命令。
在您的示例中，可以使用 d="M 14 2 A 9 9 0 1 0 14 20 A 9 9 0 1 0 14 2 M 14 16 L 14 6 M 10 10 將圓元素和三個線元素轉換為單個路徑L 14 6 M 18 10 L 14 6"。
請注意，在您的示例中， circle 元素和 line 元素具有不同的 fill 和 stroke 屬性。 如果用單個路徑替換圓元素和線元素，則生成的路徑只能具有單個填充和單個筆划。
地圖標記未顯示在Google地圖中？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.