গুগল মানচিত্রে একটি বিন্দুর চারদিকে ব্যাসার্ধ আঁকুন


93

আমি গুগল ম্যাপস এপিআই ব্যবহার করছি এবং মার্কার যুক্ত করেছি। এখন আমি প্রতিটি চিহ্নিতকারীকে ঘিরে 10 মাইল ব্যাসার্ধ যুক্ত করতে চাই, যার অর্থ একটি বৃত্ত যা জুম করার সময় যথাযথ আচরণ করে। কীভাবে করব তা আমার কোনও ধারণা নেই এবং মনে হয় এটি সাধারণ কিছু নয়।

আমি একটি উদাহরণ পেয়েছি যা দেখতে ভাল লাগছে এবং আপনিও গুগল অক্ষাংশে দেখতে পারেন। সেখানে আমি যেমন চাই তেমন তারা ব্যাসার্ধের সাথে চিহ্নিতকারী ব্যবহার করে।

আপডেট: গুগল অক্ষাংশ একটি চিত্র ব্যবহার করেছে যা স্কেল করা হয়েছে, কীভাবে এটি কাজ করবে? (বৈশিষ্ট্য অবমূল্যায়িত)


এটি দরকারী ক্ষেত্রে, এর একটি উদাহরণ এখানে দেখা যায় , একটি ড্রাগেবল ব্যাসার্ধ দিয়ে সম্পূর্ণ।
ক্যাম জ্যাকসন

উত্তর:


236

গুগল ম্যাপস এপিআই ভি 3 ব্যবহার করে একটি সার্কেল অবজেক্ট তৈরি করুন, তারপরে এটিকে আপনার মার্কারের অবস্থানের সাথে বেঁধে রাখতে বিন্ডটো () ব্যবহার করুন (যেহেতু তারা উভয়ই google.maps.MVCObject উদাহরণ)।

// Create marker 
var marker = new google.maps.Marker({
  map: map,
  position: new google.maps.LatLng(53, -2.5),
  title: 'Some location'
});

// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
  map: map,
  radius: 16093,    // 10 miles in metres
  fillColor: '#AA0000'
});
circle.bindTo('center', marker, 'position');

আপনি ফিল কালার, স্ট্রোককালার, স্ট্রোকওয়েট ইত্যাদি ( পুরো এপিআই ) পরিবর্তন করে এটিকে ঠিক গুগল অক্ষাংশ চেনাশোনা হিসাবে দেখতে পারেন make

আরও উত্স কোড এবং উদাহরণ স্ক্রিনশট দেখুন



10

দেখে মনে হচ্ছে এটি অর্জনের সর্বাধিক সাধারণ পদ্ধতি হ'ল একটি বৃত্ত অনুকরণের জন্য পর্যাপ্ত পয়েন্ট সহ একটি জিপোলিগন আঁকানো । আপনি যে উদাহরণটি উল্লেখ করেছেন তা এই পদ্ধতিটি ব্যবহার করে। এই পৃষ্ঠার একটি ভাল উদাহরণ রয়েছে - উত্স কোডে ফাংশন ড্রক সার্কেলের জন্য সন্ধান করুন ।


হ্যালো @ ক্রিস বি এসা.মিলারি জিওপিওস / সার্কেল এইচটিএম একটি দুর্দান্ত লিঙ্ক, তবে এটি ভি 2 এ করা হয়েছে, আপনি ভি 3 কোড সরবরাহ করতে পারবেন ???
অশোক কেএস

9

গোলাকার জ্যামিতির আকারগুলিকে পয়েন্ট, লাইন এবং সেই লাইনের মধ্যবর্তী কোণগুলির দ্বারা সংজ্ঞায়িত করা হয়। আপনার সাথে কাজ করার জন্য কেবল সেই প্রাথমিক মান রয়েছে।

অতএব একটি বৃত্ত (একটি গোলকের উপরে প্রস্থিত আ আকারের শর্তে) এমন একটি বিষয় যা পয়েন্টগুলি ব্যবহার করে প্রায় অনুমান করা উচিত। যত বেশি পয়েন্ট, তত বেশি এটি বৃত্তের মতো দেখাবে।

এটি বলার পরে, বুঝতে পারবেন যে গুগল ম্যাপস পৃথিবীটিকে সমতল পৃষ্ঠের দিকে প্রজেক্ট করছে (ভাবুন পৃথিবীটিকে "আনারোলিং" করে এবং "চৌকো" না হওয়া পর্যন্ত প্রসারিত + সমতল ) looks এবং আপনার যদি ফ্ল্যাট সমন্বয় ব্যবস্থা থাকে তবে আপনি এটিতে 2D অবজেক্টগুলি আঁকতে পারেন।

অন্য কথায় আপনি একটি Google মানচিত্রে একটি ছোট আকারের ভেক্টর বৃত্ত আঁকতে পারেন । ক্যাচটি হ'ল, গুগল ম্যাপস আপনাকে এটি বাক্সের বাইরে দেয় না (তারা বাস্তবতাই সম্ভব জিআইএসের মানগুলির কাছাকাছি থাকতে চায়)। তারা কেবল আপনাকে জিপোলিগন দেয় যা তারা চায় আপনি প্রায় একটি বৃত্ত ব্যবহার করতে পারেন। যাইহোক, এই লোকটি এটি IE এর জন্য ভিএমএল এবং অন্যান্য ব্রাউজারগুলির জন্য এসভিজি ব্যবহার করে করেছে ("স্কেলড সার্কেলস" বিভাগটি দেখুন)।

এখন, একটি ছোট আকারের বৃত্ত চিত্র ব্যবহার করে গুগল অক্ষাংশ সম্পর্কে আপনার প্রশ্নে ফিরে যাওয়া (এবং এটি সম্ভবত আপনার পক্ষে সবচেয়ে দরকারী): যদি আপনি জানেন তবে আপনার বৃত্তের ব্যাসার্ধ কখনই পরিবর্তিত হবে না (উদাহরণস্বরূপ এটি সর্বদা কিছু পয়েন্টের প্রায় 10 মাইল), তবে সবচেয়ে সহজ সমাধানটি হ'ল একটি জিগ্রাউন্ডওভারলে ব্যবহার করা হবে যা চিত্রটির প্রতিনিধিত্ব করে এমন একটি চিত্রের ইউআরএল + জিএলএলট্যাংবাউন্ডস। আপনার কেবলমাত্র কাজটি করতে হবে আপনার 10 মাইল ব্যাসার্ধের প্রতিনিধিত্ব করে GLatLngBound কে ভাসা । এটি একবার হয়ে গেলে, গুগল ম্যাপস এপিআই আপনার চিত্রটিকে স্কেলিং পরিচালনা করে যখন ব্যবহারকারী জুম বা আউট করে।


6
দুর্দান্ত উত্তর। আইওডাব্লু অর্থ অন্য শব্দগুলিতে এবং ওওটিবি-র অর্থ বাক্সের বাইরে, যাঁদের এটির মতো করে দেখা উচিত তাদের মতো করেছিলাম।
অ্যান্টনি হিসকক্স

4

অতীতেও আমার এই সমস্যা ছিল তাই আমি এই আলোচনাটিকে বুকমার্ক করেছি

এর সংক্ষিপ্তসার হিসাবে আপনি করতে পারেন:

  1. এই বৃত্ত ফিল্টারটির উত্স কোডটি একবার দেখুন এবং কীভাবে এটি আপনার প্রকল্পে অন্তর্ভুক্ত করবেন তা নির্ধারণ করুন।
  2. একটি বৃত্ত অনুকরণ করার জন্য পর্যাপ্ত পয়েন্ট সহ একটি জিপোলিগন আঁকুন।
  3. একটি কেএমএল ফাইল তৈরি করুন http://www.nearby.org.uk/google/circle.kML.php?radius=30 মাইল&lat = 40.173&long = -105.1024 এবং এর পরে এটি আমদানি করুন। গুগল মানচিত্রে, আপনি সন্ধান বাক্সে কেবল ইউআরআই পেস্ট করতে পারেন এবং এটি মানচিত্রে প্রদর্শিত হবে। আপনি এপিআই ব্যবহার করে কীভাবে এটি করতে পারেন তা আমি নিশ্চিত নই।

2

আমি ঠিক একটি ব্লগ নিবন্ধ লিখেছি যা ঠিক ঠিক এটি সম্বোধন করে, যা আপনি দরকারী মনে করতে পারেন: http://seewah.blogspot.com/2009/10/circ-overlay-on-google-map.html

মূলত, আপনাকে সঠিক GLatLngBounds সহ একটি GGroundOverlay তৈরি করতে হবে। কৌতুকময় বিটটি কাঙ্ক্ষিত ব্যাসার্ধের ভিত্তিতে এই বৃত্তটি আবদ্ধ করে এই কাল্পনিক স্কোয়ারের (জিএল্যাটলংবাউন্ডস) উত্তর-পূর্ব কোণার স্থানাঙ্ক এবং উত্তর-পূর্ব কোণার স্থানাঙ্কের কাজ করছে। গণিতটি বেশ জটিল, তবে আপনি কেবল ব্লগে getDestLatLng ফাংশনটি উল্লেখ করতে পারেন। বাকিগুলি বেশ সোজা হওয়া উচিত।


2

একটি API v3 সমাধানের জন্য, দেখুন:

http://blog.enbake.com/draw-circ-with-google-maps-api-v3

এটি পয়েন্টগুলির চারদিকে বৃত্ত তৈরি করে এবং তারপরে বিভিন্ন রঙের সাথে রেঞ্জের মধ্যে এবং বাইরে মার্কারগুলি দেখায়। এগুলি গতিশীল ব্যাসার্ধ গণনা করে তবে আপনার ক্ষেত্রে ব্যাসার্ধ স্থির হয়েছে তাই কম কাজ হতে পারে।


4
দুর্ভাগ্যক্রমে পৃষ্ঠা পাওয়া যায় নি।
jsims281
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.