我见过很多类似的问题(这里，这里和这里)，但他们都接受了不能解决我的问题的答案。我发现这个问题的最佳解决方案是StyledMarker库，它允许您定义标记的自定义颜色，但我不能让它使用默认标记(当您做谷歌地图搜索时得到的-中间有一个点)，它似乎只是提供了一个字母标记，或一个特殊的图标。
当前回答
我尝试了很长一段时间来改进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。
其他回答
使用swift和谷歌Maps Api v3，这是我能够做到的最简单的方法:
icon = GMSMarker.markerImageWithColor(UIColor.blackColor())
希望它能帮助到别人。
你也可以使用颜色代码。
const marker: Marker = this.map.addMarkerSync({
icon: '#008000',
animation: 'DROP',
position: {lat: 39.0492127, lng: -111.1435662},
map: this.map,
});
如果你使用谷歌地图API v3，你可以使用setIcon。
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')
或者作为标记init的一部分:
marker = new google.maps.Marker({
icon: 'http://...'
});
其他颜色:
蓝色标记 红色的标记 紫色标记 黄色的标记 绿色标记
使用下面的代码用不同的颜色更新默认标记。
(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)
我用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)
)
});
我扩展了一些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
});
