我有什么:
我为带有的谷歌地图v3标记设置了图标
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文件?
还有一个不需要使用URL.createObjectURL()的解决方案,在某些情况下可能会很麻烦或不可用。
您可以使用另一个"URL"与base64编码svg:
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
的其他解决方案可在此处找到。
尽管这个答案对你来说可能为时已晚,但它可能会帮助其他人寻找解决同一问题的方法。
表示标记的HTML元素不能通过API获得。
您必须修改符号的属性(例如fillColor
),并将修改后的符号重新分配为icon
-标记的属性:
var icon=marker.getIcon();
icon.fillColor='red';
marker.setIcon(icon);
演示(悬停符号):http://jsfiddle.net/doktormolle/yxoy2zwe/
我创建了一个用于标记的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);