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

Question

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

The*_*utC 2 javascript svg google-maps google-maps-api-3

是)我有的:

我为Google Maps v3 Marker设置了图标

var icon= {
    url: 'path/to/iconfile.svg',
    [...]
};

var marker = new google.maps.Marker({
    icon: icon
    [...]
});

Run Code Online (Sandbox Code Playgroud)

它显示很好.

我想要的是:

有没有办法从标记中获取svg文件,更改一些属性,并将其设置回标记？

我知道你可以做到marker.getIcon()获得实际的Icon对象,但是有类似的东西marker.getIcon().getElementByID("iconID").setAttribute("fill", #000000);(显然不起作用),我可以通过javascript更改SVG文件吗？

Answer 1

Tom*_*Tom 6

还有一个解决方案,无需使用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);

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

其他信息和其他解决方案InfoBox可在此处找到.

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

归档时间：	11 年前
查看次数：	3671 次
最近记录：	10 年，3 月前