Javascript 为google地图标记创建多色svg图标

Javascript 为google地图标记创建多色svg图标,javascript,google-maps-api-3,Javascript,Google Maps Api 3,我想在google地图标记中添加一个svg图标。 现在我可以通过一条路径创建svg图标, 请查找以下代码: var car = "M17.402,0H5.643C2.526,0,0,3.467,0,6.584v34.804c0,3.116,2.526,5.644,5.643,5.644h11.759c3.116,0,5.644-2.527,5.644-5.644 V6.584C23.044,3.467,20.518,0,17.402,0z M22.057,14.188v11.665l-2

我想在google地图标记中添加一个svg图标。 现在我可以通过一条路径创建svg图标, 请查找以下代码:

    var car = "M17.402,0H5.643C2.526,0,0,3.467,0,6.584v34.804c0,3.116,2.526,5.644,5.643,5.644h11.759c3.116,0,5.644-2.527,5.644-5.644 V6.584C23.044,3.467,20.518,0,17.402,0z M22.057,14.188v11.665l-2.729,0.351v-4.806L22.057,14.188z M20.625,10.773 c-1.016,3.9-2.219,8.51-2.219,8.51H4.638l-2.222-8.51C2.417,10.773,11.3,7.755,20.625,10.773z M3.748,21.713v4.492l-2.73-0.349 V14.502L3.748,21.713z M1.018,37.938V27.579l2.73,0.343v8.196L1.018,37.938z M2.575,40.882l2.218-3.336h13.771l2.219,3.336H2.575z M19.328,35.805v-7.872l2.729-0.355v10.048L19.328,35.805z";
icon = {
    path: car
    , scale: 1
    , strokeColor: 'white'
    , strokeWeight: .10
    , fillOpacity: 1
    , fillColor: '#8dc63f'
    , offset: '100%', //rotation: parseInt(heading[0]),
    anchor: new google.maps.Point(10, 25)
};
marker.setIcon(icon);
我将图标传递给marker,以便在地图上显示图标。这是一条单一的路径

现在我想使用svg路径创建一个多色图标。因此,任何人都可以发布关于如何创建多色svg路径图标并将其传递给google地图标记的帖子。

根据,您可以使用包含svg的
数据:图像
URL作为标记的图标

var $markerImage = document.querySelector('.markerImage'),
  markerImageSvg = $markerImage.innerHTML || '';
var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    clickable: false,
    icon: {
      anchor: new google.maps.Point(16, 16),
      url: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(markerImageSvg.replace('{{background}}', colors[0]))
    }
  });

代码片段:

函数初始化(){
var map=new google.maps.map(
document.getElementById(“地图画布”){
中心:新google.maps.LatLng(37.4419,-122.1419),
缩放:13,
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var$markerImage=document.querySelector('.markerImage'),
markerImageSvg=$markerImage.innerHTML | |“”;
新的google.maps.Marker({
位置:map.getCenter(),
地图:地图,
可点击:false,
图标:{
主播:新google.maps.Point(16,16),
url:'data:image/svg+xml;charset=utf-8,'+encodeURIComponent(markerImageSvg.replace('{background}}',“#FF4847”))
}
});
}
google.maps.event.addDomListener(窗口“加载”,初始化)
html,
身体,
#地图画布{
身高:100%;
宽度:100%;
边际:0px;
填充:0px
}
.markerImage{
显示:无;
}


问题的可能重复之处在于,使用此方法时,旋转不起作用。此问题没有询问旋转(还有其他方法可以)。