使用SVG文件动态修改谷歌地图图标

Dynamically modify Google Maps Icons with SVG files

本文关键字：谷歌地图 图标 修改 动态 SVG 文件 使用      更新时间：2023-09-26

我有什么：

我为带有的谷歌地图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);
相关文章：