javascript - pug options



إنشاء رمز متعدد الألوان سفغ لخريطة جوجل علامة (1)

في هذا الرابط ، يمكنك استخدام data:image عنوان ورل data:image يحتوي على سفغ لرمز علامة.

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

برهان، بسبب، بنت الفكر، كمان

مقتطف الشفرة:

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>

أريد إضافة رمز سفغ إلى علامة خريطة جوجل. الآن أنا قادرة على إنشاء رمز سفغ بواسطة مسار واحد، يرجى العثور على التعليمات البرمجية أدناه:

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

وأنا تمرير رمز لوضع علامة لعرض الرمز على الخريطة. وهذا هو مسار واحد.

والآن أريد إنشاء رمز مع لون متعدد باستخدام مسار سفغ. حتى يمكن لأي شخص يرجى نشر على كيفية إنشاء متعدد الألوان رمز مسار سفغ وتمريرها إلى علامة جوجل خريطة.





google-maps-api-3