Googleマップのカスタマイズマーカー

-1

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インラインコードがあります。Googleマップのカスタマイズマーカー

<!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マーカーは厳密に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?

出典

2016-03-21 prudvi raju

実際に私はパスに変換する方法はわかりません。 –

線要素はのmoveTo（M）コマンドとLINETO（L）コマンドを使用して、パスデータに変換することができます。たとえば、d = "M x1 y1 L x2 y2"となります。

円の要素は、moveto（M）コマンドと2つの楕円弧（A）コマンドを使用してパスデータに変換できます。例えば、d = "M cx（cy-r）A r r 0 0 cx（cy + r）A r r 0 0 cx（cy-r）"。つまり、円を2つの半円の円弧に分割することができます。

楕円弧（A）コマンドを1つ使用して完全円を描くことはできませんが、弧の終点が同じであれば、楕円の残りのパラメータを満たす無限の可能な円弧が存在するためですarc（A）コマンド。

例では、円要素と3つの線要素を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属性が異なることに注意してください。円要素と線要素を単一のパスに置き換えた場合、結果のパスは1つの塗りと1つの線のみを持つことができます。

出典

2016-03-21 20:39:42

Googleマップのカスタマイズマーカー

答えて

関連する問題