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代码并尝试仅通过浏览器使用它就可以了。

<?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
});

我认为最好的方法是将.svg中的.png转换为online converter或类似内容。你有什么理由需要.png吗？

Google将标记映射为SVG（内嵌图像png标记）

2 个答案: