Google 地图 API 绘制自定义标记：需要帮助理解我找到的这个示例

Question

我找到了这个绘制图钉形状的 google 地图自定义标记示例。

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" 属性使用多个指令和坐标描述形状。

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) 的点。命令列表可在上面的 link 中找到。

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

Google 地图 API 绘制自定义标记：需要帮助理解我找到的这个示例

Google Maps API drawing custom markers : Need help understanding this example I found

javascript

google-maps

polygon

google-maps-api-3