谷歌地图API绘制自定义标记:需要帮助理解我发现的这个例子

Question

我找到了这个谷歌地图自定义标记的例子，它绘制了一个图钉形状。

function setMarker(map, lat, lng, name) {
var position = new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({
position: position,
icon: pinSymbol('red'),
});
marker.setMap(map);
}
function pinSymbol(color) {
return {
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
fillColor: color,
fillOpacity: 0.5,
strokeColor: '#000',
strokeWeight: 1,
scale: 1.5
};
}

我需要帮助理解这部分：

path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',

这如何绘制引脚形状？我一直在尝试找出这种绘画格式，但没有运气。如何绘制矩形或其他多边形而不是图钉？

Answer 1

引脚形状是使用 SVG PathData 确定的。"path"属性使用多个指令和坐标描述形状。

路径

的定义是包含一个包含 d="(路径数据(" 属性的 'path' 元素，其中 'd' 属性包含移动、直线、曲线(三次和二次贝塞尔(、弧和闭路径指令。

基本上每个字母都是一个指令，每个数字都是一个坐标。 "M x y"执行命令"MOVETO"并将光标移动到坐标点(x，y(。上面的链接上提供了命令列表。

您可以手动构建形状，但是对于更复杂的图标会变得很麻烦。您可以使用 Gimp 或 Inkscape 从更复杂的 SVG 文件中获取 PathData。