আমি জানি এই পোস্টটি কিছুটা পুরানো, তবে আমি এসও তে এতো খারাপ তথ্য দেখেছি যে আমি চিৎকার করতে পারি। সুতরাং আমি কেবল আমার দুটি সেন্টকে সম্পূর্ণ ভিন্ন পদ্ধতির সাথে ফেলতে চাই যা আমি জানি কাজগুলি, কারণ আমি এটি বহু মানচিত্রে নির্ভরযোগ্যভাবে ব্যবহার করি। তদতিরিক্ত, আমি বিশ্বাস করি যে ওপি মানচিত্রের পয়েন্টের পাশাপাশি তীর চিহ্নিতকারীকে ঘোরানোর ক্ষমতাও চেয়েছিল যা এটি নিজস্ব x, y অক্ষের চারপাশে আইকনটি ঘোরানোর চেয়ে আলাদা যা এটি মানচিত্রের দিকে তীর চিহ্নিতকারীকে নির্দেশ করবে যেখানে পরিবর্তন হবে।
প্রথমে মনে রাখবেন আমরা গুগল ম্যাপস এবং এসভিজি নিয়ে খেলছি, সুতরাং আমাদের অবশ্যই এটির জন্য চিহ্নিত করতে হবে (যা আসলে প্রতীকগুলি) এসভিজি প্রয়োগের মাধ্যমে Google এটি প্রয়োগ করে। গুগল এসভিজি চিহ্নিতকারী চিত্রের জন্য তার নোঙ্গরটিকে 0,0 এ সেট করে যা এসভিজি ভিউবক্সের উপরের বাম কোণ নয়। এটি ঘুরে দেখার জন্য, গুগল যা চায় তা দেওয়ার জন্য আপনাকে অবশ্যই নিজের এসভিজি চিত্রটি কিছুটা আলাদাভাবে আঁকতে হবে ... হ্যাঁ উত্তরটি আপনার এসভিজি সম্পাদকের (চিত্রক, ইনসকেপ, ইত্যাদি) -তে আপনি যেভাবে আসলে এসভিজি পাথ তৈরি করেছেন তা হল answer ।)।
প্রথম পদক্ষেপটি হল ভিউবক্স থেকে মুক্তি পাওয়া। এটি আপনার এক্সএমএলে ভিউবক্সকে 0 এ সেট করে করা যেতে পারে ... এটি ঠিক, ভিউবক্সের জন্য সাধারণ চারটি আর্গুমেন্টের পরিবর্তে কেবল একটি শূন্য। এটি দর্শন বাক্সটি বন্ধ করে দেয় (এবং হ্যাঁ, এটি শব্দার্থগতভাবে সঠিক)। আপনি যখন এটি করবেন তখন আপনি সম্ভবত আপনার চিত্রের লাফের আকারটি লক্ষ্য করতে পারবেন এবং এটি কারণ যে এই চিত্রটি স্কেল করার জন্য এসভিজিটির আর কোনও বেস (ভিউবক্স) নেই। সুতরাং আমরা সরাসরি আপনার এই রেফারেন্সটি তৈরি করে পিক্সেলের প্রকৃত সংখ্যার প্রস্থ এবং উচ্চতা নির্ধারণ করে আপনার চিত্রটি আপনার এসভিজি সম্পাদকের এক্সএমএল সম্পাদক হতে চান।
এক্সএমএল সম্পাদকটিতে এসভিজি চিত্রের প্রস্থ এবং উচ্চতা নির্ধারণ করে আপনি চিত্রটি স্কেলিংয়ের জন্য একটি বেসলাইন তৈরি করেন এবং এই আকারটি ডিফল্টরূপে চিহ্নিতকারী স্কেল বৈশিষ্ট্যের জন্য 1 এর মান হয়ে যায়। চিহ্নিতকারীর গতিশীল স্কেলিংয়ের জন্য এর সুবিধাটি আপনি দেখতে পাচ্ছেন।
এখন আপনি নিজের ইমেজ আকার ধারণ করেছেন, এসভিজি সম্পাদকের 0,0 স্থানাঙ্কের উপর দিয়ে নোঙ্গর হিসাবে আপনি যে চিত্রটি পেতে চান তা অবধি ছবিটি সরিয়ে নিন। একবার আপনি এই অনুলিপিটি শেষ করে দিলে এসভিজি পাথের d বৈশিষ্ট্যের মান । আপনি দেখতে পাবেন সংখ্যার প্রায় অর্ধেকটি নেতিবাচক, যা ভিউবক্সের পরিবর্তে চিত্রটির 0,0 এর জন্য আপনার অ্যাঙ্কর পয়েন্টটি সারিবদ্ধ করার ফলাফল।
এই কৌশলটি ব্যবহারের পরে আপনাকে চিহ্নিতকারীটিকে সঠিকভাবে, মানচিত্রের ল্যাড এবং এলএনজি পয়েন্টের চারদিকে ঘোরাতে দেওয়া হবে। আপনি যে লম্বা এবং চিহ্নিতকারীটির দীর্ঘবর্তী স্থানে চান সেই svg মার্কারটিতে পয়েন্টটি বাঁধাইয়ের একমাত্র নির্ভরযোগ্য উপায়।
আমি এর জন্য একটি জেএসফিডাল তৈরি করার চেষ্টা করেছি , তবে সেখানে বাস্তবায়নের ক্ষেত্রে কিছু বাগ রয়েছে, এর একটি কারণ আমি পুনরায় ব্যাখ্যা কোডটি পছন্দ করি না। সুতরাং পরিবর্তে, আমি নীচে একটি সম্পূর্ণ স্ব-অন্তর্ভুক্ত উদাহরণ অন্তর্ভুক্ত করেছি যা আপনি চেষ্টা করতে, মানিয়ে নিতে এবং একটি রেফারেন্স হিসাবে ব্যবহার করতে পারেন। এটি আমি জেএসফিডেলে একই কোডটি চেষ্টা করেছিলাম যা ব্যর্থ হয়েছে, তবু এটি ফায়ারব্যাগের মাধ্যমে কোনও ঝাঁকুনি ছাড়াই পালটে।
<!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>
এটি ম্যাপস এপিআইয়ের সিএমএমওএল ক্লাসে উপলব্ধ নিজস্ব কয়েকটি চিহ্নের জন্য গুগল ঠিক এটিই করে, তাই যদি এটি আপনাকে বোঝায় না ... যাইহোক, আমি আশা করি এটি আপনাকে সঠিকভাবে একটি এসভিজি মার্কার তৈরি করতে এবং সেট আপ করতে সহায়তা করবে I আপনার গুগল ম্যাপগুলি সর্বশেষে।