在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/