自定义标记颜色为默认（点）标记

我已经看到许多类似于此的其他问题（这里，这里和这里），但他们都接受了不能解决我的问题的答案。 我发现问题的最佳解决方案是StyledMarker库，它可以让您为标记定义自定义颜色，但我无法使用默认标记（您在执行Google地图搜索时获得的标记 - 与中间的一个点），它似乎只提供带有字母的标记或带有特殊图标的标记。

---

您可以使用网址动态请求Google图表API中的图标图像：

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569

看起来像这样： 图像是21x34像素，引脚尖端在位置（ 10,34 ）

而且你还需要一个单独的阴影图像（以便它不与附近的图标重叠）：

http://chart.apis.google.com/chart?chst=d_map_pin_shadow

看起来像这样： 图像是40x37像素，针尖位于位置（ 12,35 ）

当您构建MarkerImages时，您需要相应地设置尺寸和定位点：

    var pinColor = "FE7569";
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));
    var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
        new google.maps.Size(40, 37),
        new google.maps.Point(0, 0),
        new google.maps.Point(12, 35));

然后，您可以将标记添加到您的地图：

        var marker = new google.maps.Marker({
                position: new google.maps.LatLng(0,0), 
                map: map,
                icon: pinImage,
                shadow: pinShadow
            });

只需用您之后的颜色代码替换“FE7569”即可。 例如：

由于Jack B Nimble的灵感而获得信用;）

---

如果您使用Google Maps API v3，则可以使用setIcon eg

marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')

或者作为标记init的一部分：

marker = new google.maps.Marker({
    icon: 'http://...'
});

其他颜色：

蓝色标记

红色标记

紫色标记

黄色标记

绿色标志

使用以下代码段以不同颜色更新默认标记。

(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)

---

这是使用Gooogle Maps API本身的一个很好的解决方案。 没有外部服务，没有额外的图书馆。 它可以自定义形状和多种颜色和样式。 该解决方案使用矢量标记，其中谷歌地图API调用符号。

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

要使用它，而不是将“图标”标记选项设置为图像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只接受单一路径，因此您必须将任何其他对象（square，cercle ...）转换为路径并将它们作为单个路径加入。 Path菜单中的两个命令。

要将路径移动到（0,0），请转到路径编辑模式（F2），选择所有控制节点并拖动它们。 用F1移动对象，不会改变路径节点坐标。

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

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

链接地址: http://www.djcxy.com/p/81501.html

上一篇: Custom marker color for default (dot) marker

下一篇: Google Maps Api v3