javascript - Google Maps API 绘图自定义标记 : Need help understanding this example I found

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 确定. “路径”属性使用多个指令和坐标描述形状。

A path is defined by including a ‘path’ element which contains a d="(path data)" attribute, where the ‘d’ attribute contains the moveto, line, curve (both cubic and quadratic Béziers), arc and closepath instructions.

基本上每个字母都是一条指令，每个数字都是一个坐标。"M x y"执行命令 "MOVETO"并将光标移动到坐标 (x,y) 的点。命令列表可在上面的链接中找到。

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