Google Maps API 3-默认（点）标记的自定义标记颜色

Question

我见过很多与此类似的其他问题（此处，此处和此处），但是他们都接受了不能解决我问题的答案。我发现该问题的最佳解决方案是StyledMarker库，该库可以让您定义标记的自定义颜色，但是我无法使用默认标记（使用Google标记搜索时获得的一种）中间的一个点），似乎只是在标记中带有字母或特殊图标。

Answer 1

这是使用Gooogle Maps API本身的不错的解决方案。没有外部服务，没有额外的库。并启用自定义形状以及多种颜色和样式。该解决方案使用矢量标记，googlemaps api将其称为Symbols。

除了少数几个有限的预定义符号外，您还可以通过指定SVG路径字符串（Spec）来制作任何颜色的任何形状。

要使用它，而不是将“ icon”标记选项设置为图像URL，而是将其设置为包含符号选项的字典。例如，我设法制作了一个与标准标记非常相似的符号：

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 M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',

        fillColor: color,

        fillOpacity: 1,

        strokeColor: '#000',

        strokeWeight: 2,

        scale: 1,

   };

}

var marker = new google.maps.Marker({

   map: map,

   position: new google.maps.LatLng(latitude, longitude),

   icon: pinSymbol("#FFF"),

});

矢量标记

如果您小心地将形状关键点保持在0,0，则不必定义标记图标居中参数。另一个路径示例，没有点的相同标记：

    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',

无点矢量标记

在这里，您有一个非常简单且难看的彩色标志：

    path: 'M 0,0 -1,-2 V -43 H 1 V -2 z M 1,-40 H 30 V -20 H 1 z',

矢量标志

您还可以使用可视工具（如Inkscape）（GNU-GPL，多平台）创建路径。一些有用的提示：

Google API只接受一条路径，因此您必须将任何其他对象（正方形，cercle ...）转换为一条路径，并将它们作为单个路径加入。路径菜单中的两个命令。

要将路径移至（0,0），请进入“路径编辑”模式（F2），选择所有控制节点并拖动它们。使用F1移动对象，不会更改路径节点坐标。

要确保参考点位于（0,0），可以单独选择它，并在顶部工具栏上手动编辑坐标。

保存为XML的SVG文件后，使用编辑器将其打开，查找svg：path元素并复制'd'属性的内容。