2016-03-21 24 views
-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. 

Wie in der Dokumentation zum Anpassen der Markierungen erwähnt, kann ich den SVG-Pfad als Marker-Notation verwenden. und hier ist mein SVG-Inline-Code.Google Maps Anpassung Marker

<!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> 

Ich habe keine Idee, einen Pfad für den obigen SVG-Code zu generieren. Google Markers akzeptiert ausschließlich PATH.

Is there any way I can generate a path for the SVG inline code. 

OR

Is there any other possible approach I can customize the marker in the HTML 
content and render into the map? 
+0

Eigentlich habe ich keine Ahnung, wie man in Pfad umwandeln .. –

Antwort

1

Linienelemente können Bahndaten umgewandelt werden, unter Verwendung eines moveto (M) und einen Befehl lineto (L) Befehl. Zum Beispiel ist d = "M x1 y1 L x2 y2".

Kreis-Elemente können Wegdaten umgewandelt werden, um eine moveto (M) Befehl und zwei Ellipsenbogens (A) Befehle. Zum Beispiel ist d = "Mcx (cy-r) Ar 0 0 c (cy + r) Ar 0 0 cx (cy-r)". Mit anderen Worten, Sie können den Kreis in zwei Halbkreisbögen aufteilen.

Beachten Sie, dass Sie keinen vollständigen Kreis mit einem einzigen elliptischen Bogen (A) zeichnen können, da die Endpunkte des Bogens identisch wären, dann würde eine unendliche Anzahl von möglichen Bögen die restlichen Parameter des Elliptischen erfüllen Bogen (A) -Befehl.

In Ihrem Beispiel könnten das Kreiselement und drei Linienelemente mit 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 in einen einzigen Pfad umgewandelt werden 6 M 10 10 L 14 6 M 18 10 L 14 6 ".

Beachten Sie, dass in Ihrem Beispiel der Kreis Element und Linienelemente unterschiedliche Füll- und Strich Attribute haben. Wenn Sie die Element- und Linienelemente des Kreises durch einen einzelnen Pfad ersetzen, kann der resultierende Pfad nur eine einzelne Füllung und einen einzelnen Strich enthalten.