下面是使用google Maps API本身的一个很好的解决方案。没有外部服务，没有额外的库。它可以自定义形状和多种颜色和样式。解决方案使用矢量标记，googlemaps api称之为符号。

除了少数且有限的预定义符号之外，您还可以通过指定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 just accepts a single path, so you have to turn any other object (square, cercle...) into a path and join them as a single one. Both commands at the Path menu. To move the path to the (0,0), go to the Path Edit mode (F2) select all the control nodes and drag them. Moving the object with F1, won't change the path node coords. To ensure the reference point is at (0,0), you can select it alone and edit the coords by hand on the top toolbar. After saving the SVG file, which is an XML, open it with an editor, look for the svg:path element and copy the content of the 'd' attribute.

结合一个基于符号的标记(其路径绘制轮廓)和一个“●”字符作为中心。您可以根据需要将点替换为其他文本('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
        }
    };
}

嗨，你可以使用图标作为SVG和设置颜色。请看这段代码

/* * declare map and places as a global variable */ var map; var places = [ ['Place 1', "<h1>Title 1</h1>", -0.690542, -76.174856,"red"], ['Place 2', "<h1>Title 2</h1>", -5.028249, -57.659052,"blue"], ['Place 3', "<h1>Title 3</h1>", -0.028249, -77.757507,"green"], ['Place 4', "<h1>Title 4</h1>", -0.800101286, -76.78747820,"orange"], ['Place 5', "<h1>Title 5</h1>", -0.950198, -78.959302,"#FF33AA"] ]; /* * use google maps api built-in mechanism to attach dom events */ google.maps.event.addDomListener(window, "load", function () { /* * create map */ var map = new google.maps.Map(document.getElementById("map_div"), { mapTypeId: google.maps.MapTypeId.ROADMAP, }); /* * create infowindow (which will be used by markers) */ var infoWindow = new google.maps.InfoWindow(); /* * create bounds (which will be used auto zoom map) */ var bounds = new google.maps.LatLngBounds(); /* * marker creater function (acts as a closure for html parameter) */ function createMarker(options, html) { var marker = new google.maps.Marker(options); bounds.extend(options.position); if (html) { google.maps.event.addListener(marker, "click", function () { infoWindow.setContent(html); infoWindow.open(options.map, this); map.setZoom(map.getZoom() + 1) map.setCenter(marker.getPosition()); }); } return marker; } /* * add markers to map */ for (var i = 0; i < places.length; i++) { var point = places[i]; createMarker({ position: new google.maps.LatLng(point[2], point[3]), map: map, icon: { path: "M27.648 -41.399q0 -3.816 -2.7 -6.516t-6.516 -2.7 -6.516 2.7 -2.7 6.516 2.7 6.516 6.516 2.7 6.516 -2.7 2.7 -6.516zm9.216 0q0 3.924 -1.188 6.444l-13.104 27.864q-0.576 1.188 -1.71 1.872t-2.43 0.684 -2.43 -0.684 -1.674 -1.872l-13.14 -27.864q-1.188 -2.52 -1.188 -6.444 0 -7.632 5.4 -13.032t13.032 -5.4 13.032 5.4 5.4 13.032z", scale: 0.6, strokeWeight: 0.2, strokeColor: 'black', strokeOpacity: 1, fillColor: point[4], fillOpacity: 0.85, }, }, point[1]); }; map.fitBounds(bounds); }); <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3"></script> <div id="map_div" style="height: 400px;"></div>

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

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

我扩展了一些vokimon的答案，使其更方便地更改其他属性。

function customIcon (opts) {
  return Object.assign({
    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: '#34495e',
    fillOpacity: 1,
    strokeColor: '#000',
    strokeWeight: 2,
    scale: 1,
  }, opts);
}

用法:

marker.setIcon(customIcon({
  fillColor: '#fff',
  strokeColor: '#000'
}));

或者在定义一个新标记时:

const marker = new google.maps.Marker({
  position: {
    lat: ...,
    lng: ...
  },
  icon: customIcon({
    fillColor: '#2ecc71'
  }),
  map: map
});