嵌入SVG标记的图片作为Google Maps图标无法显示，如何解决？

我懂你遇到的麻烦了——把SVG作为Marker的图标URL时，里面嵌入的外部图片总是显示成损坏状态，其实这是浏览器安全策略和Google Maps对Marker图标的加载限制在搞鬼。

问题根源 #

当你把SVG以data:image/svg+xml;utf-8的形式作为Marker的icon.url时，这个SVG属于"data URI"独立源，而你引用的外部图片（比如示例里的WebP图）属于另一个域名的资源。浏览器的同源安全策略会阻止跨源资源在这种场景下加载，所以图片自然无法正常显示。

可行解决方案 #

把外部图片转换成Base64编码，直接嵌入到SVG的<image>元素中，这样就不需要依赖外部资源加载，完美避开跨域限制。

修改后的完整代码示例 #

<div id="map_canvas"></div>
<script>
var geocoder;
var map;
function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var time = "00:15:30";
  // 把目标图片转换为Base64编码（可通过在线工具完成转换）
  var base64Image = "data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAABBxAR/Q9ERP8DAABWUDggGAAAADABAJ0BKgEAAQADADQlpAADcAD++/1QAA==";
  var testIcon = {
    anchor: new google.maps.Point(10, 10),
    url: 'data:image/svg+xml;utf-8,<svg width="100" height="100" class="crop-shapes" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <line x1="28" y1="40" x2="32" y2="60" style="stroke:#666; stroke-width:1"/><line x1="32" y1="60" x2="50" y2="50" style="stroke:#666; stroke-width:1"/><circle cx="45" cy="30" r="20" fill="#2ECC71" style="stroke:#000; stroke-width:1"/><text id="timer_text" class="timer" x="30" y="32" fill="#000000" font-size="9" font-weight="bold">00:10:30</text> <circle id="svg_circle" cx="20" cy="70" r="15" fill="#ffffff" style="stroke:#000; stroke-width:1"/><image xlink:href="' + base64Image + '" x="0" y="45" height="50" width="50"/></svg>'
  }
  marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    icon: testIcon,
    title: 'Hello World!'
  });
}
google.maps.event.addDomListener(window, "load", initialize);
</script>

额外注意点 #

• 你可以用在线Base64转换工具把自己的目标图片转成编码，替换代码里的base64Image内容即可。
• SVG的<image>元素的height和width属性不需要加px单位，加了反而可能导致显示异常。

内容的提问来源于stack exchange，提问作者Siddu