কম্পিউটার টিউটোরিয়াল

HTML5 জিওলোকেশন ল্যাটিটিউড/লองিটিউড API ব্যবহার

HTML5 জিওলোকেশন API ব্যবহার করে ব্যবহারকারীর লোকেশন (অক্ষাংশ এবং দ্রাঘিমাংশ) জানা যায়। জাভাস্ক্রিপ্ট দিয়ে এই ডেটা ক্যাপচার করে ব্যাকএন্ড সার্ভারে পাঠানো যায়, যাতে স্থান-ভিত্তিক সেবা (নিকটস্থ ব্যবসা খুঁজে বের করা, ম্যাপে লোকেশন দেখানো) প্রদান করা যায়।

জিওলোকেশন API গ্লোবাল navigator অবজেক্টের geolocation প্রোপার্টির মাধ্যমে কাজ করে।

উদাহরণ

নিচের কোড চালিয়ে জিওলোকেশন API ব্যবহার করে বর্তমান লোকেশন (ল্যাটিটিউড এবং লองিটিউড) জানার উদাহরণ দেখুন:

<!DOCTYPE HTML> <html>    <head>       <script type="text/javascript">          function showLocation(position) {             var latitude = position.coords.latitude;             var longitude = position.coords.longitude;             alert("Latitude : " + latitude + " Longitude: " + longitude);          }          function errorHandler(err) {             if(err.code == 1) {                alert("ত্রুটি: অ্যাক্সেস অস্বীকৃত!");             } else if( err.code == 2) {                alert("ত্রুটি: পজিশন অনুপলব্ধ!");             }          }          function getLocation(){             if(navigator.geolocation){                // টাইমআউট ৬০০০০ মিলিসেকেন্ড (৬০ সেকেন্ড)                var options = {timeout:60000};                navigator.geolocation.getCurrentPosition                (showLocation, errorHandler, options);             } else{                alert("দুঃখিত, ব্রাউজার জিওলোকেশন সাপোর্ট করে না!");             }          }       </script>    </head>    <body>       <form>          <input type="button" onclick="getLocation();" value="লোকেশন পান"/>       </form>    </body> </html>

গোপনীয়তা নোট: ব্রাউজার ব্যবহারকারীর অনুমতি চাইবে। HTTPS-এ হোস্ট করা সাইটে এই API কাজ করে। getCurrentPosition()-এর তৃতীয় প্যারামিটার হিসেবে options অবজেক্টে enableHighAccuracy: true সেট করলে আরও নির্ভুল লোকেশন मिलে (GPS ব্যবহার করে)।

  1. HTML5 জিওলোকেশন এবং গুগল ম্যাপস দিয়ে বর্তমান লোকেশন দেখানো

  2. HTML5 জিওলোকেশন API গুগল ম্যাপসের সাথে ব্যবহার

  3. HTML5-এ ড্র্যাগ অ্যান্ড ড্রপ (Drag and Drop) ব্যবহার

  4. HTML5 localStorage API ব্যবহার করে ব্রাউজারে ডেটা সংরক্ষণ