Question

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.

OR

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

Answer 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）命令绘制整圆，因为如果圆弧的端点相同，则会有无数个可能的圆弧满足椭圆弧的其余参数（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属性。如果用单个路径替换圆形元素和线元素，则生成的路径只能有一个填充和一个笔划。

谷歌地图自定义标记

1 个答案: