谷歌地图标记为 SVG（内部带有图像 png 标签）

Question

是否可以在 SVG 块内使用 .png 图像作为谷歌地图标记？我想要一张图片并使用 SVG 过滤器以不同的颜色绘制它，然后用作谷歌标记。

至少现在我正在尝试使用不带过滤器的图片：

var svg = '<?xml version="1.0"?>' +
          '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="200px" width="200px" viewBox="0 0 200 200">' +
          '<image width="200" height="200" preserveAspectRatio="xMinYMin slice" xlink:href="{link.to.png.image}"/>' +
          '</svg>';

var icon = {
  url: 'data:image/svg+xml;charset=UTF-8,' + svg,
  scaledSize: iconSize // scaled size
};

如果我将采用 svg 代码并尝试仅通过浏览器使用它，它会呈现 ok

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="200px" width="200px" viewBox="0 0 200 200">
<image width="200" height="200" preserveAspectRatio="xMinYMin slice" xlink:href="{link.to.png.image}"/>
</svg>

但是在尝试使用谷歌地图时它什么也没显示

Answer 1

我没有成功使用它的 URL 直接嵌入 PNG，在谷歌地图的 SVG 标记中。我尝试了 http 和 https。

但是，如果您将二进制文件编码为 data-uri ，它就可以工作：

var svg = '<?xml version="1.0"?>' +
          '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="200px" width="200px" viewBox="0 0 200 200">' +
          '<image width="200" height="200" preserveAspectRatio="xMinYMin slice" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>' +
          '</svg>';

Answer 2

我发现了一个可能对您有帮助的旧问题。

Here

var markercolor = "#fff";
var icon = {
   path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
   fillColor: markercolor,
   fillOpacity: .6,
   anchor: new google.maps.Point(0,0),
   strokeWeight: 0,
   scale: 1
}

var marker = new google.maps.Marker({
    position: event.latLng,
    map: map,
    draggable: false,
    icon: icon
});

我认为最好的方法是将您的 .png 转换为带有 online converter 或类似名称的 .svg。 有什么理由需要 .png？