[英]Set custom map color in google map marker
I want to display multiple markers with different color like this 我想像这样显示多个颜色不同的标记
In my code, I set custom color at outer side but problem at inner circle (fork and spoon) 在我的代码中,我在外侧设置了自定义颜色,但在内圈上设置了问题(叉子和勺子)
I want circle behind fork and spoon as it is (white) 我想在叉子和汤匙后面画圈,因为它是白色的
JS JS
var myLatlng = {
lat: 53.5617303,
lng: 9.9835443
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: myLatlng,
disableDefaultUI: true,
scrollwheel: false,
});
var $markerImage = document.querySelector('.markerImage'),
markerImageSvg = $markerImage.innerHTML || '';
myLatlng.lng -= 0.006;
['#DF6047', '#ffd454', '#88D063'].forEach(function(color) {
myLatlng.lng += 0.0099;
new google.maps.Marker({
position: myLatlng,
map: map,
clickable: false,
icon: {
anchor: new google.maps.Point(16, 16),
url: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(markerImageSvg.replace('{{background}}', color))
}
Please give me any suggestions. 请给我任何建议。
<style> .st1:
from the SVG code. <style> .st1:
fill={{background}}
to each of the paths in the SVG code. fill={{background}}
到SVG代码中的每个路径。 replace()
command replace all of the instances: markerImageSvg.replace(/{{background}}/g, color)
replace()
命令替换所有实例: markerImageSvg.replace(/{{background}}/g, color)
See updated fiddle here: https://jsfiddle.net/fzsg9pky/5/ 在这里查看更新的小提琴: https : //jsfiddle.net/fzsg9pky/5/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.