在Google地图上用svg旋转标记 [英] Rotate marker on google maps with svg
本文介绍了在Google地图上用svg旋转标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我可以在所需的程度上显示标记，但是我不能成功的是从.svg文件中显示所有图层。
我的svg文件就是这个
< svg width =125pxheight =74pxviewBox =60 85 125 74version =1.1xmlns =http://www.w3.org/2000/svgxmlns：的xlink = http://www.w3.org/1999/xlink >
< defs>
< rect id =path-1x =0y =0width =105height =54rx =4>< / rect>
< filter x = - 50％y = - 50％width =200％height =200％filterUnits =objectBoundingBoxid =filter-2>
< feOffset dx =0dy =0in =SourceAlpharesult =shadowOffsetOuter1>< / feOffset>
< feGaussianBlur stdDeviation =5in =shadowOffsetOuter1result =shadowBlurOuter1>< / feGaussianBlur>
< feComposite in =shadowBlurOuter1in2 =SourceAlphaoperator =outresult =shadowBlurOuter1>< / feComposite>
< / mask>
< / defs>
< g id =背景>
< use fill =blackfill-opacity =1filter =url（＃filter-2）xlink：href =＃path-1>< / use>
< / g>
<路径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 Zid =Test-3D-Shapestroke =＃FFFFFFstroke-width =2fill =＃D7006E><< ; /路径>
< / g>
<路径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 Zid =Page-1fill =＃FFFFFFtransform = translate（75.250000，27.249621）rotate（-90.000000）translate（-75.250000，-27.249621）>< / path>
< / g>
< / svg>
在google文档中，我们需要使用svg中的路径。但我想使用整个svg文件与URL（我可以看到图像，但不能旋转）。
所以anylbody知道如何使用这个文件的旋转可能性，
thx
这里是我的代码
map = new google.maps.Map（document.getElementById（'map-canvas'），{
<？=center：{lat：。$ order-> latitude。，lng：。$ order- >经度。}，
zoom：11;？>
}）;
// //图片旋转
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'，
比例：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：<？= $经纬度>}，{lat：<？= $ order-> latitude？> ;, lng：<？= $ order-> longitude？>}]，
图标：[
{
图标：符号1，
抵消：'0％'
}，{
图标：符号2，
抵消：'0％'
}]，
map：map
}）;
marker = new MarkerWithLabel（{
position：{
lat：<？= $ order-> latitude？> ;,
lng：< ;? = $ order->经度？>
}，
map：map，
labelContent：<？= $ order-> id？>，
labelAnchor：new google.maps.Point（15，0），
labelClass：mapLabels，//标签的CSS类
labelStyle：{opacity：0.8}，
}） ;
解决方案
要显示完整的SVG图标），将其另存为文件，然后将其用作标记的URL。
相关问题：为Google地图标记创建多色svg图标
然后您可以按照旋转.gif图像google map api v3？
代码段：
< script src =https://maps.googleapis.com/maps/api/js>< / script>< script src =https://cdn.rawgit.com/googlemaps/v3- < / script>< div id =map_canvas>< / div>< img src =http：//www.geocodezip。 com / mapIcons / SO_20170123_svgMarker.svg/>
So, I have read all topics on stack overflow and net regarding this topic.
And I can show marker in desired degree, but what I can not success is to show all "layers" from .svg file.
My svg file is this
<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>
And in google docs say that we need to use paths from svg. But I want to use whole svg file with url (I can see image but can not rotate).
So does anylbody know how to use this file with rotation possibility, thx
Here is my code
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},
});
解决方案
To show the complete SVG icon (with all its paths), save it as a file, then use that as the URL for the marker.
Related question: Creating a multi color svg icon for google map marker
You can then rotate it as explained in rotate a .gif image on google maps api v3?
proof of concept fiddle with rotating marker
code snippet:
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" />
这篇关于在Google地图上用svg旋转标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
