动态修改Google Maps图标，使用SVG文件

Question

动态修改Google Maps图标，使用SVG文件

javascriptgoogle-mapsgoogle-maps-api-3svg

3

我的做法：

我使用以下代码设置了Google Maps 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文件？

- ThePersonWithoutC

3个回答

0

我是通过创建一个 SVG 模板来实现标记，然后将模板渲染为 Blob，并将其作为 blob url 传递给 Google 地图来完成的。当您想要更改 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);

- Kimmo

0

HTML元素表示的标记在API中不可用。您必须修改符号的属性（例如fillColor），并将修改后的符号重新分配为标记的icon属性：

var icon=marker.getIcon();
icon.fillColor='red';
marker.setIcon(icon);

演示（将鼠标悬停在符号上）： http://jsfiddle.net/doktormolle/yxoy2zwe/

- Dr.Molle

感谢您的快速回复。但是，icon.fillColor='red'; 只有在您明确定义图标路径时才有效，而不是使用 .svg 文件时。当我执行 console.log(marker.getIcon()); 时，我得到了 Object {url: "/images/icon_image.svg", size: U, origin: T, anchor: T, fillColor: "red"}。它显示了图标，但颜色仍然是默认的黑色。 - ThePersonWithoutC

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tom · Accepted Answer

还有一种解决方案，无需使用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>

如果您需要更多信息或者其他解决方案，可以在这里找到。

虽然本回答可能对您来说有些晚了，但它也许能帮助其他寻找同样问题解决方案的人。