使用svg在Google地图上旋转标记

因此，我已阅读关于此主题的关于堆栈溢出和网络的所有主题。使用svg在Google地图上旋转标记

而且我可以显示所需程度的标记，但是我无法成功的是从.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路径。但我想使用整个svg文件与网址（我可以看到图像，但不能旋转）。

因此，没有anylbody知道如何使用这个文件用旋转可能性， THX

这里是我的代码

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

来源

2017-01-23 JohnWayne

请提供一个演示问题的[mcve]。发布的代码显示默认标记图标。 – geocodezip

旋转当前图标（至少将其用作MarkerWithLabel的图标）的问题在于它不是对称的，它在旋转90度时会被切断。 – geocodezip

相关问题：[在谷歌地图api v3上旋转.gif图像？]（http://stackoverflow.com/questions/38723573/rotate-a-gif-image-on-google-maps-api-v3） – geocodezip

显示完整SVG图标（及其所有路径），将其保存为一个文件，然后用它作为标记的URL。

proof of concept fiddle

然后，您可以旋转它作为rotate a .gif image on google maps api v3?

proof of concept fiddle with rotating marker

代码片段解释：

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" />

来源

2017-01-23 16:22:37 geocodezip

使用svg在Google地图上旋转标记

回答

相关问题