svg로 google지도에서 마커를 회전

Question

그래서이 주제와 관련하여 스택 오버플로 및 넷에 대한 모든 주제를 읽었습니다.

원하는 마커를 표시 할 수 있지만 성공할 수없는 것은 .svg 파일의 모든 "레이어"를 표시하는 것입니다.

내 SVG 파일은

<svg width="125px" height="74px" viewBox="60 85 125 74" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 

    <defs> 
     <rect id="path-1" x="0" y="0" width="105" height="54" rx="4"></rect> 
     <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2"> 
      <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> 
      <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> 
      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite> 
      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix> 
     </filter> 
     <mask id="mask-3" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="105" height="54" fill="white"> 
      <use xlink:href="#path-1"></use> 
     </mask> 
    </defs> 
    <g id="Test-Image" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(70.000000, 95.000000)"> 
     <g id="Test-Box"> 
      <g id="Background"> 
       <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use> 
       <use stroke="#FFFFFF" mask="url(#mask-3)" stroke-width="4" fill="#B2005B" fill-rule="evenodd" xlink:href="#path-1"></use> 
      </g> 
      <path d="M82.0839364,42.9141136 L11.2935052,42.9423118 L11.2749164,11.0373262 L82.0839364,11.0419231 L97.9820616,1 L0.444915254,1 L0.444915254,52.9658699 C0.444915254,52.9658699 97.3451506,52.9690943 97.9820616,52.9658699 C98.6189725,52.9626454 82.0839364,42.9141136 82.0839364,42.9141136 Z" id="Test-3D-Shape" stroke="#FFFFFF" stroke-width="2" fill="#D7006E"></path> 
     </g> 
     <path d="M75.2510488,45.3746213 C75.5223392,45.3746213 75.8817209,45.210132 76.0547854,45.0456428 L85.9943015,35.6908041 C86.4448929,35.2558041 86.4971241,34.5456159 86.0402962,34.0373363 C85.6286832,33.5836267 84.8311832,33.5711535 84.3868284,33.9913417 L76.4204037,41.5009385 L76.4204037,10.2939761 C76.4204037,9.64849225 75.8965327,9.12462128 75.2510488,9.12462128 C74.605565,9.12462128 74.081694,9.64849225 74.081694,10.2939761 L74.081694,41.5009385 L66.1152693,33.9913417 C65.6709144,33.5711535 64.8913445,33.6015568 64.4618015,34.0373363 C64.0080918,34.4972826 64.0478499,35.2612611 64.5077962,35.6908041 L74.4473123,45.0456428 C74.717823,45.3200514 74.9766402,45.371503 75.2510488,45.3746213 Z" id="Page-1" fill="#FFFFFF" transform="translate(75.250000, 27.249621) rotate(-90.000000) translate(-75.250000, -27.249621) "></path> 
    </g> 
</svg> 

그리고 구글 문서 도구에서이 우리가 SVG에서 경로를 사용할 필요가 있다고합니다. 하지만 URL로 전체 svg 파일을 사용하고 싶습니다 (이미지는 볼 수 있지만 회전 할 수는 없습니다).

이

그래서 anylbody 회전 가능성이 파일 들으 여기

을 사용하는 방법을 알고 않습니다 내 코드

map = new google.maps.Map(document.getElementById('map-canvas'), { 
    <?= "center: {lat: ".$order->latitude.", lng: ".$order->longitude."}, 
    zoom: 11"; ?> 
    }); 

    // //Image rotation 
    var symbolOne = { 
     path: 'M82.0839364,42.9141136 L11.2935052,42.9423118 L11.2749164,11.0373262 L82.0839364,11.0419231 L97.9820616,1 L0.444915254,1 L0.444915254,52.9658699 C0.444915254,52.9658699 97.3451506,52.9690943 97.9820616,52.9658699 C98.6189725,52.9626454 82.0839364,42.9141136 82.0839364,42.9141136 Z', 
     scale: 1, 
     strokeColor: '#FFFFFF', 
     fillColor: '#B2005B', 
     fillOpacity: 1 
    }; 

    var symbolTwo = { 
     path: 'M75.2510488,45.3746213 C75.5223392,45.3746213 75.8817209,45.210132 76.0547854,45.0456428 L85.9943015,35.6908041 C86.4448929,35.2558041 86.4971241,34.5456159 86.0402962,34.0373363 C85.6286832,33.5836267 84.8311832,33.5711535 84.3868284,33.9913417 L76.4204037,41.5009385 L76.4204037,10.2939761 C76.4204037,9.64849225 75.8965327,9.12462128 75.2510488,9.12462128 C74.605565,9.12462128 74.081694,9.64849225 74.081694,10.2939761 L74.081694,41.5009385 L66.1152693,33.9913417 C65.6709144,33.5711535 64.8913445,33.6015568 64.4618015,34.0373363 C64.0080918,34.4972826 64.0478499,35.2612611 64.5077962,35.6908041 L74.4473123,45.0456428 C74.717823,45.3200514 74.9766402,45.371503 75.2510488,45.3746213 Z', 
     scale: 1, 
     strokeColor: '#FFFFFF', 
     fillColor: '#D7006E', 
     fillOpacity: 1, 
     rotation: 270, 
    }; 

    var symbolThree = { 
     path: 'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3', 
     strokeColor: '#00F', 
     rotation: 45 
    }; 

    var line = new google.maps.Polyline({ 
    path: [{lat: <?=$order->latitude?>, lng: <?=$order->longitude?>}, {lat: <?=$order->latitude?>, lng: <?=$order->longitude?>}], 
    icons: [ 
    { 
     icon: symbolOne, 
     offset: '0%' 
    }, { 
     icon: symbolTwo, 
     offset: '0%' 
    }], 
    map: map 
}); 

marker = new MarkerWithLabel({ 
    position: { 
    lat: <?=$order->latitude?>, 
    lng: <?=$order->longitude?> 
    }, 
    map: map, 
    labelContent: "<?=$order->id?>", 
    labelAnchor: new google.maps.Point(15, 0), 
    labelClass: "mapLabels", // the CSS class for the label 
    labelStyle: {opacity: 0.8}, 
}); 

Answer 1

(모든 경로 포함) 전체 SVG 아이콘을 표시하는 것입니다 ,로 저장 파일을 만든 다음 마커의 URL로 사용하십시오.

관련 질문 :

var geocoder; 
 
var map; 
 

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

 
    marker = new MarkerWithLabel({ 
 
    position: map.getCenter(), 
 
    map: map, 
 
    icon: { 
 
     url: "http://www.geocodezip.com/mapIcons/SO_20170123_svgMarker.svg", 
 
     anchor: new google.maps.Point(62.5, 37), 
 
    }, 
 
    labelContent: "27", 
 
    labelAnchor: new google.maps.Point(10, 8), 
 
    labelClass: "mapLabels", // the CSS class for the label 
 
    labelStyle: { 
 
     opacity: 0.8, 
 
     color: "white" 
 
    }, 
 
    title: "svg url" 
 
    }); 
 

 
    var symbolOne = { 
 
    path: 'M82.0839364,42.9141136 L11.2935052,42.9423118 L11.2749164,11.0373262 L82.0839364,11.0419231 L97.9820616,1 L0.444915254,1 L0.444915254,52.9658699 C0.444915254,52.9658699 97.3451506,52.9690943 97.9820616,52.9658699 C98.6189725,52.9626454 82.0839364,42.9141136 82.0839364,42.9141136 Z', 
 
    scale: 1, 
 
    strokeColor: '#FFFFFF', 
 
    fillColor: '#B2005B', 
 
    fillOpacity: 1 
 
    }; 
 
    var marker2 = new MarkerWithLabel({ 
 
    position: { 
 
     lat: 37.454476, 
 
     lng: -122.11617 
 
    }, 
 
    map: map, 
 
    icon: symbolOne, 
 
    labelContent: "27", 
 
    labelAnchor: new google.maps.Point(10, 8), 
 
    labelClass: "mapLabels", // the CSS class for the label 
 
    labelStyle: { 
 
     opacity: 0.8, 
 
     color: "white" 
 
    }, 
 
    title: "svg symbol" 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 
.mapLabels { 
 
    color: "white" 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/fb56a0dc/markerwithlabel/src/markerwithlabel.js"></script> 
 

 
<div id="map_canvas"></div> 
 
<img src="http://www.geocodezip.com/mapIcons/SO_20170123_svgMarker.svg" />

012 :

proof of concept fiddle with rotating marker

코드 rotate a .gif image on google maps api v3?

에 설명 된대로 Creating a multi color svg icon for google map marker

proof of concept fiddle

당신은 다음을 회전 할 수 있습니다