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

Question

我想显示多个不同颜色的标记，如

see my demo link

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

我想在叉子和勺子后面圈（白色）

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/