我见过很多类似的问题(这里，这里和这里)，但他们都接受了不能解决我的问题的答案。我发现这个问题的最佳解决方案是StyledMarker库，它允许您定义标记的自定义颜色，但我不能让它使用默认标记(当您做谷歌地图搜索时得到的-中间有一个点)，它似乎只是提供了一个字母标记，或一个特殊的图标。
当前回答
我扩展了一些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
});
其他回答
你可以动态地请求图标图像从谷歌图表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的灵感;)
正如其他人所提到的，vokimon的答案是伟大的，但不幸的是，谷歌地图有点慢时，有许多SymbolPath/ svg为基础的标记同时。
看起来使用Data URI要快得多，与png差不多。
此外，由于这是一个完整的SVG文档，因此可以为圆点使用适当的填充圆。路径被修改，因此它不再偏移到左上角，因此需要定义锚。
下面是生成这些标记的修改版本:
var coloredMarkerDef = {
svg: [
'<svg viewBox="0 0 22 41" width="22px" height="41px" xmlns="http://www.w3.org/2000/svg">',
'<path d="M 11,41 c -2,-20 -10,-22 -10,-30 a 10,10 0 1 1 20,0 c 0,8 -8,10 -10,30 z" fill="{fillColor}" stroke="#ffffff" stroke-width="1.5"/>',
'<circle cx="11" cy="11" r="3"/>',
'</svg>'
].join(''),
anchor: {x: 11, y: 41},
size: {width: 22, height: 41}
};
var getColoredMarkerSvg = function(color) {
return coloredMarkerDef.svg.replace('{fillColor}', color);
};
var getColoredMarkerUri = function(color) {
return 'data:image/svg+xml,' + encodeURIComponent(getColoredMarkerSvg(color));
};
var getColoredMarkerIcon = function(color) {
return {
url: getColoredMarkerUri(color),
anchor: coloredMarkerDef.anchor,
size: coloredMarkerDef.size,
scaledSize: coloredMarkerDef.size
}
};
用法:
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(latitude, longitude),
icon: getColoredMarkerIcon("#FFF")
});
缺点是，就像PNG图像一样，整个矩形都是可点击的。理论上，跟踪SVG路径并生成MarkerShape多边形并不难。
有时候很简单的事情，也可以用复杂来回答。我并不是说上面的答案都是不正确的，但我只是想说，它可以这么简单:
我知道这个问题很老了，但是如果有人只是想改变大头针或标记颜色，那么请查看文档:https://developers.google.com/maps/documentation/android-sdk/marker
当你添加你的标记时，只需设置图标属性:
GoogleMap gMap;
LatLng latLng;
....
// write your code...
....
gMap.addMarker(new MarkerOptions()
.position(latLng)
.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN));
有10种默认颜色可供选择。如果这还不够(简单的解决方案)，那么我可能会选择其他答案中给出的更复杂的解决方案，满足更复杂的需求。
ps:我在另一个答案中写了一些类似的东西，因此我应该参考那个答案，但上次我这么做的时候，我被要求张贴答案，因为它太短了(就像这个)。
我扩展了一些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
});
我用StyledMarker所能得到的最接近的东西是这个。
不过，中间的子弹并不像默认的子弹那么大。StyledMarker类只是构建这个url，并要求谷歌api创建标记。
从类使用示例使用“%E2%80%A2”作为你的文本，如:
var styleMaker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{text:"%E2%80%A2"},styleIconClass),position:new google.maps.LatLng(37.263477473067, -121.880502070713),map:map});
你需要修改StyledMarker.js来注释掉这些行:
if (text_) {
text_ = text_.substr(0,2);
}
因为这将把文本字符串修剪为2个字符。
或者，你也可以创建自定义标记图像基于默认的一个你想要的颜色，并覆盖默认标记的代码，如:
marker = new google.maps.Marker({
map:map,
position: latlng,
icon: new google.maps.MarkerImage(
'http://www.gettyicons.com/free-icons/108/gis-gps/png/24/needle_left_yellow_2_24.png',
new google.maps.Size(24, 24),
new google.maps.Point(0, 0),
new google.maps.Point(0, 24)
)
});
