javascript - 在谷歌地图标记中设置自定义 map 颜色

Question

我想像这样显示多个具有不同颜色的标记

see my demo link

在我的代码中，我在外侧设置了自定义颜色，但内圈( fork 和勺子)出现问题

我想要 fork 和勺子后面有一个圆圈(白色)

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))
    }

请给我任何建议。

Answer 1

1. 删除 <style> .st1:来自 SVG 代码。
2. 添加 fill={{background}}到 SVG 代码中的每个路径。
3. 制作 JavaScript replace()命令替换所有实例:markerImageSvg.replace(/{{background}}/g, color)

在此处查看更新的 fiddle :https://jsfiddle.net/fzsg9pky/5/