在Google地图标记中设置自定义地图颜色

Question

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

看到我的演示链接

在我的代码中，我在外侧设置了自定义颜色，但在内圈上设置了问题（叉子和勺子）

我想在叉子和汤匙后面画圈，因为它是白色的

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. 从SVG代码中删除<style> .st1:
2. 将fill={{background}}到SVG代码中的每个路径。
3. 使javascript replace()命令替换所有实例： markerImageSvg.replace(/{{background}}/g, color)

在这里查看更新的小提琴： https : //jsfiddle.net/fzsg9pky/5/