为谷歌地图标记创建多色 svg 图标 [英] Creating a multi color svg icon for google map marker

查看：22
本文介绍了为谷歌地图标记创建多色 svg 图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想向谷歌地图标记添加一个 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.716,c30.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.38.2108z,2.467,20.518,0,17.402,0z M22.057,14.188v11.665l-2.729,0.38.2107-20.38.20.7506L-20.506L1.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,2.222-8.51C2.417,10.773,11.3,7.755,20.625,10.773z M3.748,2.222-8.51C2.3.748,2.222-8.51C2.3.748,773l.2404l.2404L21.713z M1.018,37.938V27.579l2.73,0.343v8.196L1.018,37.938z M2.575,40.882l2.218-3.336h13.771l2.35.78z,2.39578z,2.39578H,2.39578Hl2.729-0.355v10.048L19.328,35.805z";图标 = {路线:汽车，规模:1,strokeColor: '白色',strokeWeight: .10，填充不透明度:1, 填充颜色: '#8dc63f', offset: '100%',//rotation: parseInt(heading[0]),锚点:新 google.maps.Point(10, 25)};标记.setIcon(icon);

我将图标传递给标记以在地图上显示图标.这是一个单一的路径.

现在我想使用 svg 路径创建一个多色图标.那么任何人都可以发布关于如何创建多色 svg 路径图标并将其传递给谷歌地图标记的帖子.

解决方案

Per

代码片段:

function initialize() {var map = new google.maps.Map(document.getElementById("map_canvas"), {中心:新的 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(),地图:地图，可点击:假，图标: {锚点:新的 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,身体，#map_canvas {高度:100%；宽度:100%；边距:0px；填充:0px}.markerImage {显示:无；}

<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"><定义><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></过滤器></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,-7216,-1726,-1726,-1726,-1726,-1726,-1726,-17273,-7273,-1.873，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.72727升-2.18182，2.18182l-1.63636,-2.18182l-1.63636,2.18182l-2.18182,-2.18182z"/></svg>

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]))
    }
  });

proof of concept fiddle

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>

这篇关于为谷歌地图标记创建多色 svg 图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆