Question

我有什么：

我使用

设置了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文件？

Answer 1

还有一个解决方案，无需使用URL.createObjectURL()，这在某些情况下可能很麻烦或不可用。

您可以使用其他网址＆＃39;使用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生成基本数据网址。

以下是一个完整的例子：

<!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。

虽然这个答案对你来说可能为时已晚，但它可能会帮助其他人寻找同一问题的解决方案。

Answer 2

表示标记的HTML元素不能通过API获得。

您必须修改符号的属性（例如fillColor）并将修改后的符号重新指定为icon - 标记的属性：

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

演示（悬停符号）： http://jsfiddle.net/doktormolle/yxoy2zwe/

Answer 3

我是通过为标记创建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);

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

3 个答案: