谷歌地图标记为SVG（图像PNG标记内）

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

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

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>

但它试图与谷歌地图使用时什么也没有显示

来源

2017-04-24 A.Khvorov

我没有成功将直接使用它的PNG嵌入到Google地图的SVG标记中。我尝试了http和https。

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>';

来源

2017-05-07 05:08:07 GeH

可能这个转换为数据uri是由一些工具从框（Javascript或不喜欢这样）？ –

@ A.Khvorov：是的，但这是另一个问题。你可以看看[那里]（http://stackoverflow.com/questions/934012/get-image-data-in-javascript），并按照接受的答案中的建议尝试Kaiido的代码，或者从MuniR得到答案，如果你在你的html中不需要'img'标签。 – GeH

非常感谢！ –

我发现了一个较老的问题，可能会帮助你。

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具有类似online converter什么的。你有什么理由需要一个.png吗？

来源

2017-04-24 10:37:40

在这些答案PPL使用的坐标，而不是png文件：

但是，如果你编码的二进制文件数据-URI的作品。我的图片路径存储在数据库中（也适用于所有图片），所以我需要选择存储在文件系统下的png文件，然后显示为谷歌标记，但重点是我需要将这些png文件着色为不同的颜色取决于“类别”，我决定使用SVG的过滤器标签 –

我向你展示的转换网站有一个API。您可以使用它在您的代码中直接转换它。 –

http://apiv2.online-convert.com/ –

谷歌地图标记为SVG（图像PNG标记内）

回答

相关问题