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


当前回答

我尝试了很长一段时间来改进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。

其他回答

你可以使用这段代码,它工作得很好。

 var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/");<br>

 var marker = new google.maps.Marker({
            position: yourlatlong,
            icon: pinImage,
            map: map
        });

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

结合一个基于符号的标记(其路径绘制轮廓)和一个“●”字符作为中心。您可以根据需要将点替换为其他文本('A', 'B'等)。

这个函数返回带有给定文本(如果有)、文本颜色和填充颜色的标记的选项。它使用文本颜色作为大纲。

function createSymbolMarkerOptions(text, textColor, fillColor) {
    return {
        icon: {
            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: fillColor,
            fillOpacity: 1,
            strokeColor: textColor,
            strokeWeight: 1.8,
            labelOrigin: { x: 0, y: -30 }
        },
        label: {
            text: text || '●',
            color: textColor
        }
    };
}

从谷歌maps API的3.11版本开始,Icon对象取代了MarkerImage。Icon支持与MarkerImage相同的参数。我甚至发现它更直接一些。

一个例子可以是这样的:

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

欲了解更多信息,请查看该网站

这些是定制的圆形标记

small_red:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NUlH5v9rF5f+ZoCAwHaig8B8oPhOmKC1NU/P//7Q0DByrqgpSGAtSdOCAry9WRXt9fECK9oIUPXwYFYVV0e2ICJCi20SbFAuyG5uiECUlkKIQmOPng3y30d0d7Lt1bm4w301jQAOgcNoIDad1yOEEAFm9fSv/VqtJAAAAAElFTkSuQmCC

small_yellow:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NijL7v3p1+v8zZ6rAdGCg4X+g+EyYorS0NNv////PxMCxsRYghbEgRQcOHCjGqmjv3kKQor0gRQ8fPmzHquj27WaQottEmxQLshubopAQI5CiEJjj54N8t3FjFth369ZlwHw3jQENgMJpIzSc1iGHEwB8p5qDBbsHtAAAAABJRU5ErkJggg==

small_green:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiElEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81izL7n746/X/VmSowbRho+B8oPhOmKM02zfb/TCzQItYCpDAWpOhA8YFirIoK9xaCFO0FKXrY/rAdq6Lm280gRbeJNikWZDc2RUYhRiBFITDHzwf5LmtjFth3GesyYL6bxoAGQOG0ERpO65DDCQDX7ovT++K9KQAAAABJRU5ErkJggg==

small_blue:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81M4v6n56++n9V1RkwbWgY+B8oPhOmKM3WNu3/zJn/MbCFRSxIYSxI0YHi4gNYFRUW7gUp2gtS9LC9/SFWRc3Nt0GKbhNtUizIbmyKjIxCQIpCYI6fD/JdVtZGsO8yMtbBfDeNAQ2AwmkjNJzWIYcTAMk+i9OhipcQAAAAAElFTkSuQmCC

small_purple:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NMov6vzp99f8zVWfAdKBh4H+g+EyYorQ027T//2f+x8CxFrEghbEgRQcOFB/Aqmhv4V6Qor0gRQ8ftj/Equh2822QottEmxQLshubohCjEJCiEJjj54N8tzFrI9h36zLWwXw3jQENgMJpIzSc1iGHEwBt95qDejjnKAAAAABJRU5ErkJggg==

它们是9x9的png图像。

一旦他们在你的页面上,你可以把他们拖走,你会有实际的png文件。