我见过很多类似的问题(这里,这里和这里),但他们都接受了不能解决我的问题的答案。我发现这个问题的最佳解决方案是StyledMarker库,它允许您定义标记的自定义颜色,但我不能让它使用默认标记(当您做谷歌地图搜索时得到的-中间有一个点),它似乎只是提供了一个字母标记,或一个特殊的图标。


当前回答

正如其他人所提到的,vokimon的答案是伟大的,但不幸的是,谷歌地图有点慢时,有许多SymbolPath/ svg为基础的标记同时。

看起来使用Data URI要快得多,与png差不多。

此外,由于这是一个完整的SVG文档,因此可以为圆点使用适当的填充圆。路径被修改,因此它不再偏移到左上角,因此需要定义锚。

下面是生成这些标记的修改版本:

var coloredMarkerDef = {
    svg: [
        '<svg viewBox="0 0 22 41" width="22px" height="41px" xmlns="http://www.w3.org/2000/svg">',
            '<path d="M 11,41 c -2,-20 -10,-22 -10,-30 a 10,10 0 1 1 20,0 c 0,8 -8,10 -10,30 z" fill="{fillColor}" stroke="#ffffff" stroke-width="1.5"/>',
            '<circle cx="11" cy="11" r="3"/>',
        '</svg>'
    ].join(''),
    anchor: {x: 11, y: 41},
    size: {width: 22, height: 41}
};

var getColoredMarkerSvg = function(color) {
    return coloredMarkerDef.svg.replace('{fillColor}', color);
};

var getColoredMarkerUri = function(color) {
    return 'data:image/svg+xml,' + encodeURIComponent(getColoredMarkerSvg(color));
};

var getColoredMarkerIcon = function(color) {
    return {
        url: getColoredMarkerUri(color),
        anchor: coloredMarkerDef.anchor,
        size: coloredMarkerDef.size,
        scaledSize: coloredMarkerDef.size
    }
};

用法:

var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(latitude, longitude),
    icon: getColoredMarkerIcon("#FFF")
});

缺点是,就像PNG图像一样,整个矩形都是可点击的。理论上,跟踪SVG路径并生成MarkerShape多边形并不难。

其他回答

你可以动态地请求图标图像从谷歌图表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的灵感;)

将路径改为chart.googleapis.com,否则SSL将无法工作

我尝试了很长一段时间来改进vokimon的绘制标记,使其更类似于谷歌Maps 1(并且非常成功)。这是我得到的代码:

let circle=true;

path = 'M 0,0  C -0.7,-9 -3,-14 -5.5,-18.5 '+   
'A 16,16 0 0,1 -11,-29 '+  
'A 11,11 0 1,1 11,-29 '+  
'A 16,16 0 0,1 5.5,-18.5 '+  
'C 3,-14 0.7,-9 0,0 z '+  
['', 'M -2,-28 '+  
'a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0'][new Number(circle)];   

我还把它缩放了0.8。

如果你使用谷歌地图API v3,你可以使用setIcon。

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)

使用swift和谷歌Maps Api v3,这是我能够做到的最简单的方法:

icon = GMSMarker.markerImageWithColor(UIColor.blackColor())

希望它能帮助到别人。