我正在使用Google Maps API构建一个带有多个标记的地图，但我想让其中一个标记与其他标记不同。我认为最简单的方法是将标记的颜色更改为蓝色，而不是红色。这是一个简单的事情吗？还是我必须通过某种方式创建全新的图标？如果我必须创建一个新图标，最简单的方法是什么？
9个回答
134
使用Google Maps 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'
});
这非常简单，这也是我目前正在进行的项目所采用的方法。
- Sean McMains
3
6这个答案太棒了。我很难过被接受的答案是针对V2的，但幸运的是向下滚动还是有收获的。谢谢！ - Adam Tuttle
我创建了一个不依赖于图像的版本：https://dev59.com/IHE95IYBdhLWcg3wEpvo#23163930 - Jonathan
如何在地图上创建的折线中添加自定义标记。我创建了两个自定义标记，即起点和终点，但是当我在它们之间画一条线时，会在我的自定义标记上创建默认的红色标记。 - Zia
80
Material Design
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,
});
- Jonathan
14
@JoeGalind 是否有必要在获取颜色时进行加密？我的意思是，除非在标头中暴露了我不知道的东西，否则使用
http没有安全风险。 - Jonathan11已更新至2019版，不再过时。 - Jonathan
1问题在于自定义的标记似乎使用矩形命中目标，如果您尝试手动将标记放置在彼此靠近的位置，则会非常不好。 - George Birbilis
1这些点
12, 9、12, 15 和 12, 17 是如何确定的？ - ackerleytng显示剩余9条评论
50
MapIconMaker：适用于Google Maps v2的库
一种方法是使用MapIconMaker（已失效）。有一个示例在这里（已失效）。Google Maps默认图标的宽度为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”。另外，您可以在标记上设置setImage而不是创建具有新图标的新标记。因此，如果您想要一个高亮功能，您可以使用上面的函数，例如：
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来创建Google Maps类型标记。如果您愿意直接使用Google Charts API，则可以随时查看源代码。
然而，这个库的问题在于它为您定义了这些标记图像的可点击区域，因此，例如，带有文本的较长气泡将具有人们期望的可点击区域，如此示例（失效链接）。
- Bob
7
3这似乎只与GMaps API v2兼容？ - Tigraine
7@Tigraine 我实际上为了v3创建了一个全新的库，名为“StyledMarker”，可以在v3实用程序库中找到：http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries - Bob
@Matt 最初，是的，只有v2版本。后来我更新了，包括了v3解决方案。 - Bob
FYI，“setImage”不是Google Maps API v3中市场的一个函数。“setIcon”是正确的函数。 - Nick Bork
这些链接已经失效了 - 有人知道它们现在可以在哪里找到吗？ - Gavin Coates
显示剩余2条评论
48
由于地图v2已被弃用，您可能对v3地图感兴趣：https://developers.google.com/maps/documentation/javascript/markers#simple_icons
对于v2地图：
http://code.google.com/apis/maps/documentation/overlays.html#Icons_overview
您可以使用一个逻辑集完成“常规”标记，并使用定义的新标记另外实现“特殊”标记。
- Kevin
2
26给未来的读者：这是针对已不再使用的 Google Maps API v2 编写的内容。如果您正在使用v3，则需要寻找其他资源。 - priestc
14我点击了第一个链接，使用ctrl-f查找“color”，但没有结果。为了确实回答问题，最好添加更多细节。提问者明确问是否可以在不制作新图标的情况下更改颜色。 - qwertzguy
25
个人认为Google Charts API生成的图标既好看，也容易在动态情况下进行自定义。
- matt burns
1
1这与@Jonathan的答案类似，但该服务不幸已被弃用。 - Todd Owen
14
我发现最简单的方法是使用BitmapDescriptorFactory.defaultMarker()，文档甚至有一个设置颜色的示例。以下是我的代码：
MarkerOptions marker = new MarkerOptions()
.title(formatInfo(data))
.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
.position(new LatLng(data.getLatitude(), data.getLongitude()))
- Michael Hamilton
2
这是仅限于安卓还是也适用于网页浏览器？ - Jonathan
@Jonathan - 这只适用于Android - 他发布的示例是使用JAVA编写的。 - dazza5000
2
要自定义标记，您可以使用此在线工具：https://materialdesignicons.com/
在您的情况下，您想要的是map-marker，您可以在此处找到它，并进行在线定制。
如果您只想将默认的红色更改为蓝色，则可以加载此图标：http://maps.google.com/mapfiles/ms/icons/blue-dot.png 这在此线程中已经提到了：https://dev59.com/pVwY5IYBdhLWcg3waXK5#32651327
如果您只想将默认的红色更改为蓝色，则可以加载此图标：http://maps.google.com/mapfiles/ms/icons/blue-dot.png 这在此线程中已经提到了：https://dev59.com/pVwY5IYBdhLWcg3waXK5#32651327
- GuGuss
-2
这篇相对较新的文章提供了一个简单的示例，使用有限的谷歌地图彩色图标。
如果想要查看一个真实网站示例，使用蓝色和橙色地图标记，请查看这个网站并查看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>
- Trunk
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接