我正在使用 Google Maps API 构建一个充满标记的地图，但我希望一个标记能够从其他标记中脱颖而出。我认为，最简单的做法是将标记的颜色更改为蓝色，而不是红色。这是一件简单的事情还是我必须以某种方式创建一个全新的图标？如果我必须创建一个新图标，最简单的方法是什么？
【问题讨论】：
标签： google-maps google-maps-api-2
使用第 3 版的 Google Maps API，最简单的方法可能是获取自定义图标集，例如 Benjamin Keen 在此处创建的图标集：
http://www.benjaminkeen.com/google-maps-coloured-markers/
如果您将所有这些图标与地图页面放在同一个位置，则可以在创建标记时使用适当的图标选项简单地为标记着色：
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: 'brown_markerA.png'
});
这非常简单，也是我目前正在从事的项目所使用的方法。
【讨论】：
EDITED 2019 年 3 月现在使用程序化图钉颜色，
纯 JAVASCRIPT，无图像，支持标签
不再依赖已弃用的 Charts API
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,
});
【讨论】：
MapIconMaker 已被弃用。
http 没有安全风险，除非它在标题中暴露了我不知道的内容
一种方法是使用MapIconMaker（死链接）。有一个例子here(deadlink)。 Google 地图的默认图标是 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);
}
由于前段时间 V2 被 V3 取代，我想我应该更新这个答案。我为自定义标记创建了一个库，可以在 V3 Utility Library here(deadlink) 上找到它。它允许不同的颜色和形状，您也可以在标记上放置文本。它通过使用 Google Charts API 工作，该 API 具有创建 Google Maps 类型标记的方法。如果您想直接使用 Google Charts API，请随意查看源代码。
然而，关于该库的事情是，它负责为您定义这些标记图像的可点击区域，因此，例如，带有文本的较长气泡将具有人们期望的可点击区域，例如 this example （死链接）。
【讨论】：
由于地图 v2 已弃用，您可能对 v3 地图感兴趣：https://developers.google.com/maps/documentation/javascript/markers#simple_icons
对于 v2 地图：
http://code.google.com/apis/maps/documentation/overlays.html#Icons_overview
您将有一组逻辑执行所有“常规”引脚，而另一组逻辑使用定义的新标记执行“特殊”引脚。
【讨论】：
就我个人而言，我认为 Google Charts API 生成的图标看起来很棒，并且易于动态自定义。
在Google Maps API 3 - Custom marker color for default (dot) marker上查看我的回答
【讨论】：
我发现最简单的方法是使用 BitmapDescriptorFactory.defaultMarker() documentation 甚至有一个设置颜色的例子。来自我自己的代码：
MarkerOptions marker = new MarkerOptions()
.title(formatInfo(data))
.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
.position(new LatLng(data.getLatitude(), data.getLongitude()))
【讨论】：
要自定义标记，您可以使用此在线工具：https://materialdesignicons.com/
在您的情况下，您需要 map-marker，它可以在此处获得：https://materialdesignicons.com/icon/map-marker 并且您可以在线自定义。
如果您只是想将默认的红色更改为蓝色，可以加载此图标：http://maps.google.com/mapfiles/ms/icons/blue-dot.png
【讨论】：
This relatively recent article 提供了一个简单的示例，其中包含一组有限的 Google 地图彩色图标。
有关使用蓝色和橙色地图标记的真实网站示例，请参阅this website 并查看 Google 地图下的脚本。
<section id="map" class="map">
<script>
let map;
const speediwash = { lat: 52.656937, lng: -8.634390 };
const stJosephX = { lat: 52.658041, lng: -8.632414};
// const maryI = { lat: 52.653192, lng: -8.638974 };
const trainStn = { lat: 52.658757, lng: -8.623560 };
// const claytonH = { lat: 52.660802, lng: -8.636411 };
let markersArray = []; // Global array to store the marker object
function initMap()
{
map = new google.maps.Map(document.getElementById('map'),
{
center: stJosephX,
zoom: 15.1
});
addMarker(speediwash, "Speediwash", "blue");
//addMarker(maryI, "Mary I College", "green");
addMarker(trainStn, "Train Station", "orange");
//addMarker(claytonH, "Clayton Hotel", "purple");
}
function addMarker(latLng, alabel, color)
{
let url = "https://maps.google.com/mapfiles/ms/icons/";
url += color + "-dot.png";
let marker = new google.maps.Marker(
{
map: map,
position: latLng,
label: alabel,
icon:
{
url: url,
labelOrigin: new google.maps.Point(60, 30)
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyANwXk4HVQv7w5WAEUCStjAgT25b0s0p1Y&callback=initMap">
</script>
【讨论】：