爲Google地圖標記創建多色svg圖標

Question

我想向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); 

，我路過的圖標標記在地圖上顯示的圖標。這是一條單一路徑。

現在我想創建一個使用svg路徑的多色圖標。所以任何人都可以發佈如何創建一個多色svg路徑圖標並將其傳遞給谷歌地圖標記。

Answer 1

根據this link，您可以使用包含SVG的data:image 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])) 
    } 
    }); 

proof of concept fiddle

代碼片斷：

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    var $markerImage = document.querySelector('.markerImage'), 
 
    markerImageSvg = $markerImage.innerHTML || ''; 
 
    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}}', "#FF4847")) 
 
    } 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 
.markerImage { 
 
    display: none; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div> 
 
<div class="markerImage"> 
 
    <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
     <linearGradient id="myGradient" gradientUnits="userSpaceOnUse" x1="5" y1="16" x2="27" y2="16" gradientTransform="rotate(90 16 16)"> 
 
     <stop offset="0" stop-color="white" /> 
 
     <stop offset="1" stop-color="black" /> 
 
     </linearGradient> 
 
     <filter id="dropshadow"> 
 
     <feGaussianBlur in="SourceAlpha" stdDeviation="1" /> 
 
     <feOffset dx="0" dy="0" result="offsetblur" /> 
 
     <feFlood flood-color="#000" flood-opacity=".25" /> 
 
     <feComposite in2="offsetblur" operator="in" /> 
 
     <feMerge> 
 
      <feMergeNode/> 
 
      <feMergeNode in="SourceGraphic" /> 
 
     </feMerge> 
 
     </filter> 
 
    </defs> 
 
    <path fill="{{background}}" stroke="white" stroke-width="1.5" style="filter:url(#dropshadow)" d="M3.5 3.5h25v25h-25z" /> 
 
    <path opacity=".15" fill="url(#myGradient)" d="M5 5h22v22H5z" /> 
 
    <path fill="#88D063" d="m12.18182,8.90909v2.72727c0,1.8 1.5,2.78182 3.27273,2.72727v7.09091c-0.88691,-1.77273 -2.72727,-3.81818 -5.45455,-2.72727c0,0 1.63636,4.36364 6,4.36364s6,-4.36364 6,-4.36364c-2.72727,-1.09091 -4.56873,0.95455 -5.45454,2.72727v-7.09091c1.77272,0.05455 3.27273,-0.92727 3.27273,-2.72727v-2.72727l-2.18182,2.18182l-1.63636,-2.18182l-1.63636,2.18182l-2.18182,-2.18182z" 
 
    /> 
 
    </svg> 
 
</div>