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

Как указано в документации по настройке маркеров, я могу использовать SVG-путь как обозначение маркера. и вот мой встроенный код SVG.google maps customizing 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> 

Я понятия не имею, чтобы сгенерировать путь для вышеуказанного 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? 
+0

На самом деле я понятия не имею, как преобразовать в путь .. –

ответ

1

элементы строки могут быть преобразованы в данные путь, используя команду MoveTo (M) и команду LineTo (L). Например, d = «M x1 y1 L x2 y2».

Элементы окружности могут быть преобразованы в данные пути с использованием команды moveto (M) и двух команд эллиптической дуги (A). Например, d = «M cx (cy-r) A r r 0 1 0 cx (cy + r) A r r 0 1 0 cx (cy-r)". Другими словами, вы можете разбить круг на две половины окружности.

Обратите внимание, что вы не можете нарисовать полный круг с помощью одной команды эллиптической дуги (A), потому что, если конечные точки дуги были идентичны, тогда было бы бесконечное количество возможных дуг, которые удовлетворяли бы остальным параметрам для эллиптического arc (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 ".

Обратите внимание, что в вашем примере элемент круга и элементы линии имеют разные атрибуты заполнения и инсульта. Если вы замените элемент окружности и элементы линии на один путь, тогда результирующий путь может иметь только одну заливку и один ход.