Google Maps不使用文本节点呈现SVG元素

Question

这是我的SVG元素：

<svg height="20" width="90" style="background-color: #eee; border-radius: 2px;">
  <text x="0" y="15" fill="#0052CC" font-weight="bold">&nbsp;Test</text>
</svg>

我正在尝试将其显示为Google地图标记，但似乎无法正常工作。

这是我的标记对象：

var marker = new google.maps.Marker({
                position: location,
                map: map,
                icon: {
                  // anchor: new google.maps.Point(16, 16),
url: 'data:image/svg+xml;utf-8,' + 
'<svg height="20" width="90" style="background-color: #eee; border-radius: 2px;">' +
  '<text x="0" y="15" fill="#0052CC" font-weight="bold">&nbsp;Test</text>' + 
'</svg>',
  size: new google.maps.Size(32, 32),
  scaledSize: new google.maps.Size(20, 20)
                }
            });

Answer 1

示例here有效。看起来您缺少xml名称空间。这对我有用：

var marker = new google.maps.Marker({
  position: map.getCenter(),
  map: map,
  icon: {
    url: 'data:image/svg+xml;utf-8,' +
      '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="20" width="90" style="background-color: #eee; border-radius: 2px;"><text x="0" y="15" fill="#0052CC" font-weight="bold">Test</text></svg>',
    size: new google.maps.Size(32, 32),
  }
});

proof of concept fiddle

代码段：

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
<script>
  function init() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 17,
      center: new google.maps.LatLng(54.833890, 9.547270)
    });
    var marker = new google.maps.Marker({
      position: map.getCenter(),
      map: map,
      icon: {
        url: 'data:image/svg+xml;utf-8,' +
          '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="20" width="90" style="background-color: #eee; border-radius: 2px;"><text x="0" y="15" fill="#0052CC" font-weight="bold">Test</text></svg>',
        size: new google.maps.Size(32, 32),
      }
    });
  }
  google.maps.event.addDomListener(window, 'load', init);
</script>