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

通过包含'path'元素定义路径，该元素包含ad =“（路径数据）”属性，其中'd'属性包含moveto，line，curve（包括立方和二次Béziers），arc和closepath指令。

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

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

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

1 个答案: