我有什么：
我使用
设置了 Google Maps v3 Marker 的图标var icon= {
url: 'path/to/iconfile.svg',
[...]
};
var marker = new google.maps.Marker({
icon: icon
[...]
});
而且显示正常。
我想要什么：
有没有办法可以从标记中获取该 svg 文件，更改一些属性，然后将其设置回标记？
我知道您可以通过 marker.getIcon() 获取实际的 Icon 对象，但是是否有类似于 marker.getIcon().getElementByID("iconID").setAttribute("fill", #000000); 的东西（显然这不起作用），我可以在哪里通过 javascript 更改 SVG 文件？
【问题讨论】：
标签： javascript google-maps google-maps-api-3 svg
表示标记的 HTML 元素无法通过 API 获得。
您必须修改符号的属性（例如fillColor）并将修改后的符号重新分配为标记的icon-property：
var icon=marker.getIcon();
icon.fillColor='red';
marker.setIcon(icon);
【讨论】：
icon.fillColor='red'; 仅在您明确定义图标的路径时才有效，而不是在您使用 .svg 文件时有效。当我做console.log(marker.getIcon()); 时，我得到Object {url: "/images/icon_image.svg", size: U, origin: T, anchor: T, fillColor: "red"}。它显示图标，但颜色仍然是默认的黑色。
为此，我为标记创建了一个 SVG 模板，然后将该模板渲染为一个 Blob，我将其作为 blob url 传递给谷歌地图。然后在您想要更改 SVG 的属性时重做相同的过程。
这远非最佳解决方案，但它是使其发挥作用的一种方法。不幸的是，如果您经常更新，此方法会使图标闪烁。
示例代码：
var template = [
'<?xml version="1.0"?>',
'<svg width="26px" height="26px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">',
'<circle stroke="#222" fill="{{ color }}" cx="50" cy="50" r="35"/>',
'</svg>'
].join('\n');
var svg = template.replace('{{ color }}', '#888');
var blob = new Blob([svg], {type: 'image/svg+xml'});
var blobUrl = URL.createObjectURL(blob);
var image = {
url: blobUrl,
anchor: new google.maps.Point(13, 13)
};
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map, // Map object created earlier in the scope
title: 'title',
icon: image
});
// After finishing work with blob url, call:
// URL.revokeObjectURL(blobUrl);
【讨论】：
还有一个无需使用URL.createObjectURL() 的解决方案，这在某些情况下可能会很麻烦或不可用。
您可以使用带有 base64 编码的 svg 的替代“URL”：
var svg = '<svg width="400" height="110"><rect width="300" height="100" /></svg>';
icon.url = 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg);
JavaScript (Firefox) btoa() 用于从 SVG 文本中获取 base64 编码。您也可以使用http://dopiaza.org/tools/datauri/index.php 来生成基础数据 URL。
这是一个完整的例子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var template = [
'<?xml version="1.0"?>',
'<svg width="26px" height="26px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">',
'<circle stroke="#222" fill="{{ color }}" cx="50" cy="50" r="35"/>',
'</svg>'
].join('\n');
var svg = template.replace('{{ color }}', '#800');
var docMarker = new google.maps.Marker({
position: new google.maps.LatLng(-33.92, 151.25),
map: map,
title: 'Dynamic SVG Marker',
icon: { url: 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg) }
});
</script>
</body>
</html>
更多信息和使用InfoBox 的其他解决方案可以在here 找到。
虽然这个答案对您来说可能为时已晚，但它可能会帮助其他人寻找相同问题的解决方案。
【讨论】：
<svg> 标签创建图像并将其设置为图标。每当我更新颜色时，我只是替换了fill 属性。不幸的是，您不能仅使用代码对 .svg files 执行此操作。