由于地图 v2已被弃用，因此您可能对 v3地图感兴趣: < a href = “ https://developers.google.com/map/document/javascript/marks # simple _ icon”rel = “ noReferrer”> https://developers.google.com/maps/documentation/javascript/markers#simple_icons

对于 v2地图:

Http://code.google.com/apis/maps/documentation/overlays.html#icons_overview

您将有一组逻辑来处理所有“常规”引脚，另一组逻辑使用新定义的标记来处理“特殊”引脚。

MapIconMaker: Google Maps v2库

一种方法是使用 MapIconMaker(死链接)。有一个例子 这里(死链接)。谷歌地图的默认图标是20px 的宽度和34px 的高度，所以你可以使用这样的东西来模仿:

var newIcon = MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: "#0000FF", cornercolor:"#0000FF"});
var marker = new GMarker(map.getCenter(), {icon: newIcon});

你甚至可以用一些函数把它包装起来，让事情变得更简单:

function getIcon(color) {
return MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: color, cornercolor:color});
}

这是我个人用于所有我创建的标记。我更喜欢随心所欲地改变颜色。

更新: 默认图标的十六进制颜色为“ # FE7569”。此外，您可以在标记上设置图像，而不是创建带有新图标的新标记。因此，如果你想让一个函数突出显示，你可以使用上面的函数:

function highlightMarker(marker, highlight) {
var color = "#FE7569";
if (highlight) {
color = "#0000FF";
}
marker.setImage(getIcon(color).image);
}

StyledMarker: Google Maps v3库

由于 V2在某个时候被 V3取代了，我认为我应该更新这个答案。我为自定义标记创建了一个库，这些标记可以在 V3实用程序库 这里(死链接)上找到。它允许不同的颜色和形状，您也可以在标记上放置文本。它通过使用 Google Charts API 工作，该 API 具有创建 GoogleMaps 类型标记的方法。如果您更愿意直接使用 GoogleChartAPI，请随意查看源代码。

然而，这个库的问题在于，它负责为您定义这些标记图像的可点击区域，因此，例如，带有文本的较长的气泡将具有人们所期望的可点击区域，如 这个例子(死链接)。

使用谷歌地图 API 的第3版，最简单的方法可能是获取一个自定义图标集，比如 Benjamin Keen 在这里创建的图标集:

Http://www.benjaminkeen.com/google-maps-coloured-markers/

如果你把所有这些图标放在地图页面的同一个位置，你可以简单地使用合适的图标选项来为标记着色:

var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: 'brown_markerA.png'
});

这非常简单，而且是我目前正在进行的项目所使用的方法。

就我个人而言，我认为谷歌图表 API 生成的图标看起来很棒，并且易于动态定制。

在谷歌地图 API 3-默认(点)标记的自定义标记颜色中查看我的答案

我发现最简单的方法是使用 BitmapDescriptorFactory.defaultMarker () ，文件甚至有一个设置颜色的例子。根据我自己的代码:

MarkerOptions marker = new MarkerOptions()
.title(formatInfo(data))
.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
.position(new LatLng(data.getLatitude(), data.getLongitude()))

材料设计

编辑于2019年3月 现在用编程图钉颜色,

纯 JAVASCRIPT，无图像，支持标签

    var pinColor = "#FFFFFF";
var pinLabel = "A";


// Pick your pin (hole or no hole)
var pinSVGHole = "M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z";
var labelOriginHole = new google.maps.Point(12,15);
var pinSVGFilled = "M 12,2 C 8.1340068,2 5,5.1340068 5,9 c 0,5.25 7,13 7,13 0,0 7,-7.75 7,-13 0,-3.8659932 -3.134007,-7 -7,-7 z";
var labelOriginFilled =  new google.maps.Point(12,9);




var markerImage = {  // https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerLabel
path: pinSVGFilled,
anchor: new google.maps.Point(12,17),
fillOpacity: 1,
fillColor: pinColor,
strokeWeight: 2,
strokeColor: "white",
scale: 2,
labelOrigin: labelOriginFilled
};
var label = {
text: pinLabel,
color: "white",
fontSize: "12px",
}; // https://developers.google.com/maps/documentation/javascript/reference/marker#Symbol
this.marker        = new google.maps.Marker({
map: map.MapObject,
//OPTIONAL: label: label,
position: this.geographicCoordinates,
icon: markerImage,
//OPTIONAL: animation: google.maps.Animation.DROP,
});