将 svg 图像渲染为谷歌地图标记

Question

我有一个如下的 svg 图片

<svg version="1.1" id="svgBusMarker" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<g><path id="SVG_Timing" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" stroke="#92E0A4" stroke-width="4.2823" stroke-miterlimit="22.9256" d="M13.896,36.696c0-6.115,4.988-11.104,11.104-11.104s11.104,4.988,11.104,11.104S31.116,47.8,25,47.8S13.896,42.812,13.896,36.696z"/>
    <path id="SVG_Violation" fill-rule="evenodd" clip-rule="evenodd" fill="#FF0000" d="M19.901,31.597h10.198v10.197H19.901V31.597z"/>
    <path id="SVG_Speed" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFF00" d="M25,0l10.198,25.681c-2.677-2.48-6.26-3.996-10.198-3.996   s-7.521,1.516-10.198,3.996L25,0z"/>
</g>
</svg>

问题是，我想将此图像显示为我的谷歌地图上的图标

var myIcon = {
                url: 'data:image/svg+xml;utf-8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="90px" height="90px" viewBox="-260 352 90 90" style="enable-background:new -260 352 90 90;" xml:space="preserve"><style type="text/css">.SVG_Timing{fill:#FFFFFF;stroke:#92E0A4;}.SVG_Violation{fill:#FF0000;stroke:#2B2E33;}.SVG_Speed{fill:#92E0A4}</style><path class="SVG_Timing" d="M13.896,36.696c0-6.115,4.988-11.104,11.104-11.104s11.104,4.988,11.104,11.104S31.116,47.8,25,47.8S13.896,42.812,13.896,36.696z"/><path class="SVG_Violation" d="M19.901,31.597h10.198v10.197H19.901V31.597z" /><path class="SVG_Speed" d="M25,0l10.198,25.681c-2.677-2.48-6.26-3.996-10.198-3.996s-7.521,1.516-10.198,3.996L25,0z"/></svg>',
                size: new google.maps.Size(32, 32),
                scaledSize: new google.maps.Size(20, 20)
            };

            marker = new google.maps.Marker({
                position: new google.maps.LatLng(triangleCoords[0].lat, triangleCoords[0].lng),
                map: gmap,
                icon: myIcon,
                id: 1,
                optimized: false
            });

但我无法实现我的目标。我不想使用覆盖。请有人帮助我。

提前致谢！

Answer 1

你可以像这样渲染 SVG 标记，

既然没有fillRule，那最好把它转成SVG文件作为图标

    var icon = {
        path: "M13.896,36.696c0-6.115,4.988-11.104,11.104-11.104s11.104,4.988,11.104,11.104S31.116,47.8,25,47.8S13.896,42.812,13.896,36.696z M19.901,31.597h10.198v10.197H19.901V31.597z M25,0l10.198,25.681c-2.677-2.48-6.26-3.996-10.198-3.996   s-7.521,1.516-10.198,3.996L25,0z",
        fillColor: '#FF0000',
        fillOpacity: 1,
        anchor: new google.maps.Point(25,25),
    }

    var marker = new google.maps.Marker({
        position: event.latLng,
        map: map,
        icon: icon,
    });