google-maps-api-3 - Google Maps API 3 - 默认(点)标记的自定义标记颜色

Question

我见过很多与此类似的其他问题( here 、 here 和 here )，但他们都接受了无法解决我的问题的答案。我发现该问题的最佳解决方案是 StyledMarker库，它确实允许您为标记定义自定义颜色，但我无法让它使用默认标记(当您进行谷歌地图搜索时得到的标记 - 中间有一个点)，它似乎只是提供带有字母或特殊图标的标记。

Answer 1

您可以从 Google charts 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)

位置

当您构建 MarkerImage 时您需要相应地设置大小和 anchor :

    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));

然后您可以使用以下方法将标记添加到 map 中:

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

只需将“FE7569”替换为您想要的颜色代码即可。例如:

由于Jack B Nimble而产生的信用寻找灵感;)