मुझे पता है कि यह पोस्ट थोड़ी पुरानी है, लेकिन मैंने एसओ पर इस पर इतनी बुरी जानकारी देखी है कि मैं चिल्ला सकता था। इसलिए मैं बस अपने दो सेंट को अलग-अलग दृष्टिकोण के साथ फेंकता हूं जो मुझे पता है कि काम करता है, क्योंकि मैं इसे कई मानचित्रों पर मज़बूती से उपयोग करता हूं। इसके अलावा, मेरा मानना है कि ओपी को मानचित्र बिंदु के चारों ओर तीर मार्कर को घुमाने की क्षमता थी, जो आइकन के चारों ओर घूमने की तुलना में अलग है, यह एक्स एक्स, वाई अक्ष है जो बदल देगा जहां तीर मार्कर मानचित्र पर इंगित करता है।
सबसे पहले, याद रखें कि हम Google मानचित्र और एसवीजी के साथ खेल रहे हैं, इसलिए हमें उस तरीके को अपनाना चाहिए जिसमें Google यह मार्करों (या वास्तव में प्रतीकों) के लिए एसवीजी का कार्यान्वयन कर रहा है। Google 0,0 पर SVG मार्कर छवि के लिए अपना एंकर सेट करता है जो SVG व्यूबॉक्स के ऊपरी बाएँ कोने में नहीं है। इसके आस-पास जाने के लिए, आपको अपनी SVG छवि को Google को देने के लिए थोड़ा अलग तरीके से खींचना चाहिए जो वह चाहता है ... हां इसका उत्तर उस तरह से है जैसा कि आप वास्तव में अपने SVG संपादक (Illustrator, Inkscape, आदि) में SVG पथ बनाते हैं। ।)।
पहला कदम, व्यूबॉक्स से छुटकारा पाना है। यह आपके XML में व्यूबॉक्स को 0 पर सेट करके किया जा सकता है ... यह सही है, व्यूबॉक्स के लिए सामान्य चार तर्कों के बजाय सिर्फ एक शून्य है। यह व्यू बॉक्स को बंद कर देता है (और हां, यह शब्दार्थ रूप से सही है)। आप शायद अपनी छवि के आकार को ध्यान से देखते हैं जब आप ऐसा करते हैं, और ऐसा इसलिए है क्योंकि svg में अब छवि को स्केल करने के लिए आधार (व्यूबॉक्स) नहीं है। तो हम उस संदर्भ को सीधे बनाते हैं, जिस चौड़ाई और ऊंचाई को पिक्सेल की वास्तविक संख्या पर सेट करके आप अपनी छवि को अपने एसवीजी संपादक के XML संपादक में होना चाहते हैं।
XML संपादक में svg छवि की चौड़ाई और ऊंचाई निर्धारित करके आप छवि के स्केलिंग के लिए एक आधार रेखा बनाते हैं, और यह आकार डिफ़ॉल्ट रूप से मार्कर स्केल गुणों के लिए 1 का मान बन जाता है। आप मार्कर के डायनेमिक स्केलिंग के लिए इसका लाभ देख सकते हैं।
अब जब आपके पास अपनी छवि का आकार है, तब तक छवि को स्थानांतरित करें जब तक कि आप जिस छवि के हिस्से को चाहते हैं वह लंगर संपादक के 0,0 निर्देशांक से अधिक हो। एक बार जब आप इस प्रतिलिपि svg पथ के d विशेषता का मान कर लेते हैं । आप देखेंगे कि लगभग आधी संख्या नकारात्मक हैं, जो कि व्यू बॉक्स के बजाय छवि के 0,0 के लिए अपने एंकर बिंदु को संरेखित करने का परिणाम है।
इस तकनीक का उपयोग करने से आप मानचित्र पर लेट और लैंग पॉइंट के चारों ओर सही ढंग से मार्कर घुमा सकेंगे। यह एकमात्र विश्वसनीय तरीका है जिसे आप उस svg मार्कर पर बिंदु को बांध सकते हैं जिसे आप लेट और मार्कर के लंबे स्थान पर चाहते हैं।
मैंने इसके लिए एक JSFiddle बनाने की कोशिश की , लेकिन वहाँ कार्यान्वयन में कुछ बग है, एक कारण मैं पुनर्व्याख्या कोड का इतना शौकीन नहीं हूं। इसलिए इसके बजाय, मैंने नीचे एक पूरी तरह से आत्म-निहित उदाहरण को शामिल किया है जिसे आप संदर्भ के रूप में आज़मा सकते हैं, अनुकूलित कर सकते हैं और उपयोग कर सकते हैं। यह वही कोड है जिसे मैंने JSFiddle पर आजमाया था, जो असफल रहा, फिर भी यह बिना फुसफुसाए Firebug के माध्यम से रवाना होता है।
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Drew G. Stimson, Sr. ( Epiphany )" />
<title>Create Draggable and Rotatable SVG Marker</title>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script>
<style type="text/css">
#document_body {
margin:0;
border: 0;
padding: 10px;
font-family: Arial,sans-serif;
font-size: 14px;
font-weight: bold;
color: #f0f9f9;
text-align: center;
text-shadow: 1px 1px 1px #000;
background:#1f1f1f;
}
#map_canvas, #rotation_control {
margin: 1px;
border:1px solid #000;
background:#444;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#map_canvas {
width: 100%;
height: 360px;
}
#rotation_control {
width: auto;
padding:5px;
}
#rotation_value {
margin: 1px;
border:1px solid #999;
width: 60px;
padding:2px;
font-weight: bold;
color: #00cc00;
text-align: center;
background:#111;
border-radius: 4px;
}
</style>
<script type="text/javascript">
var map, arrow_marker, arrow_options;
var map_center = {lat:41.0, lng:-103.0};
var arrow_icon = {
path: 'M -1.1500216e-4,0 C 0.281648,0 0.547084,-0.13447 0.718801,-0.36481 l 17.093151,-22.89064 c 0.125766,-0.16746 0.188044,-0.36854 0.188044,-0.56899 0,-0.19797 -0.06107,-0.39532 -0.182601,-0.56215 -0.245484,-0.33555 -0.678404,-0.46068 -1.057513,-0.30629 l -11.318243,4.60303 0,-26.97635 C 5.441639,-47.58228 5.035926,-48 4.534681,-48 l -9.06959,0 c -0.501246,0 -0.906959,0.41772 -0.906959,0.9338 l 0,26.97635 -11.317637,-4.60303 c -0.379109,-0.15439 -0.812031,-0.0286 -1.057515,0.30629 -0.245483,0.33492 -0.244275,0.79809 0.0055,1.13114 L -0.718973,-0.36481 C -0.547255,-0.13509 -0.281818,0 -5.7002158e-5,0 Z',
strokeColor: 'black',
strokeOpacity: 1,
strokeWeight: 1,
fillColor: '#fefe99',
fillOpacity: 1,
rotation: 0,
scale: 1.0
};
function init(){
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: map_center,
zoom: 4,
mapTypeId: google.maps.MapTypeId.HYBRID
});
arrow_options = {
position: map_center,
icon: arrow_icon,
clickable: false,
draggable: true,
crossOnDrag: true,
visible: true,
animation: 0,
title: 'I am a Draggable-Rotatable Marker!'
};
arrow_marker = new google.maps.Marker(arrow_options);
arrow_marker.setMap(map);
}
function setRotation(){
var heading = parseInt(document.getElementById('rotation_value').value);
if (isNaN(heading)) heading = 0;
if (heading < 0) heading = 359;
if (heading > 359) heading = 0;
arrow_icon.rotation = heading;
arrow_marker.setOptions({icon:arrow_icon});
document.getElementById('rotation_value').value = heading;
}
</script>
</head>
<body id="document_body" onload="init();">
<div id="rotation_control">
<small>Enter heading to rotate marker </small>
Heading°<input id="rotation_value" type="number" size="3" value="0" onchange="setRotation();" />
<small> Drag marker to place marker</small>
</div>
<div id="map_canvas"></div>
</body>
</html>
यह ठीक है कि Google इसके लिए मैप्स एपीआई के SYMBOL वर्ग में उपलब्ध कुछ प्रतीकों के लिए स्वयं करता है, इसलिए यदि यह आपको मना नहीं करता है ... वैसे भी, मुझे आशा है कि यह आपको सही ढंग से एसवीजी मार्कर बनाने और स्थापित करने में मदद करेगा। आपके Google मानचित्र एंडेवोर्स हैं।