为Google地图标记创建多色svg图标 [英] Creating a multi color svg icon for google map marker
本文介绍了为Google地图标记创建多色svg图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想为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.6651-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.6381-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;
图标= {
路径：汽车
，比例：1
，strokeColor：'white'
，strokeWeight：.10
，fillOpacity：1
，fillColor：'＃8dc63f'
，偏移：'100％'，// rotation：parseInt（heading [0]），
anchor：new google.maps.Point（10，25 ）
};
marker.setIcon（icon）;
我将图标传递给标记以在地图上显示图标。这是一个单一的路径。
现在我想使用svg路径创建一个带有多种颜色的图标。所以任何人都可以发布如何创建一个多色svg路径图标并将其传递给谷歌地图标记。
解决方案
a href =https://robert.katzki.de/posts/inline-svg-as-google-maps-marker =nofollow noreferrer>此链接，您可以使用<$ c $
var $ markerImage =>图片包含标记图标的SVG的URL。 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（'{{背景}}'，颜色[0]））
}
}）;
<
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 || ;新的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 ％;宽度：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 =32height =32viewBox =0 0 32 32xmlns =http://www.w3.org/2000/svg> < DEFS> < linearGradient id =myGradientgradientUnits =userSpaceOnUsex1 =5y1 =16x2 =27y2 =16gradientTransform =rotate（90 16 16）> < stop offset =0stop-color =white/> < stop offset =1stop-color =black/> < /&的LinearGradient GT; < filter id =dropshadow> < feGaussianBlur in =SourceAlphastdDeviation =1/> < feOffset dx =0dy =0result =offsetblur/> < feFlood flood-color =＃000flood-opacity =。25/> < feComposite in2 =offsetbluroperator =in/> < feMerge> < feMergeNode /> < feMergeNode in =SourceGraphic/> < / feMerge> < /滤光器> < / DEFS> < path fill ={{background}}stroke =whitestroke-width =1.5style =filter：url（#dropshadow）d =M3.5 3.5h25v25h-25z/> < path opacity =。15fill =url（#myGradient）d =M5 5h22v22H5z/> <路径填充=＃88D063d =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.727271-2.18182， 2.18182l-1.63636，-2.18182l-1.63636,2.18182l-2.18182，-2.18182z/> < / svg>< / div>
I want to add a svg icon to the google map marker. Right now i am able to create a svg icon by a single path, Please find the code below:
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);
And i am passing the icon to marker to display the icon on the map. And this is a single path.
And now i want to create a icon with the multi color using the svg path. So can anybody please post on how to create a multicolor svg path icon and passing it to a google map marker.
解决方案
Per this link, you can use a data:image URL containing SVG for the icon of a marker.
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]))
}
});
code snippet:
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>
这篇关于为Google地图标记创建多色svg图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
