谷歌地图自定义标记

google maps customizing marker

本文关键字：自定义 谷歌地图      更新时间：2023-09-26
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 代码生成路径。谷歌标记将严格接受路径。

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?

可以使用 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" 转换为单个路径。

请注意，在您的示例中，圆形元素和线条元素具有不同的填充和描边属性。如果将圆形元素和线元素替换为单个路径，则生成的路径只能具有单个填充和单个描边。

相关文章：