Geolocation API का इस्तेमाल करके बनाया गया एक आसान ट्रिप मीटर

Michael Mahemoff

परिचय

Geolocation API की मदद से, उपयोगकर्ता की जगह की जानकारी का पता लगाया जा सकता है. साथ ही, उपयोगकर्ता की सहमति से, उसके एक जगह से दूसरी जगह जाने पर उसकी जगह की जानकारी को ट्रैक किया जा सकता है. इस सुविधा का इस्तेमाल, उपयोगकर्ता की क्वेरी के हिस्से के तौर पर किया जा सकता है. उदाहरण के लिए, किसी व्यक्ति को मंज़िल तक पहुंचने के लिए निर्देश देना. इसका इस्तेमाल, उपयोगकर्ता के बनाए गए कॉन्टेंट को "जियो-टैग" करने के लिए भी किया जा सकता है. उदाहरण के लिए, यह बताने के लिए कि फ़ोटो कहां ली गई थी. यह एपीआई, डिवाइस के हिसाब से काम नहीं करता. इससे कोई फ़र्क़ नहीं पड़ता कि ब्राउज़र, जगह की जानकारी का पता कैसे लगाता है. हालांकि, इसके लिए ज़रूरी है कि क्लाइंट, स्टैंडर्ड तरीके से जगह की जानकारी के डेटा का अनुरोध कर सकें और उसे हासिल कर सकें. इसके लिए, जीपीएस या वाई-फ़ाई का इस्तेमाल किया जा सकता है. इसके अलावा, उपयोगकर्ता से मैन्युअल तरीके से अपनी जगह की जानकारी डालने के लिए कहा जा सकता है. इनमें से किसी भी लुकअप में कुछ समय लगेगा. इसलिए, एपीआई एसिंक्रोनस है. जब भी जगह की जानकारी का अनुरोध किया जाता है, तो आपको कॉलबैक का तरीका पास करना होता है.

यहां दिए गए उदाहरण में, ट्रिप मीटर दिखाया गया है. इसमें शुरुआती जगह की जानकारी दिखती है. साथ ही, पेज लोड होने के बाद से तय की गई दूरी की जानकारी भी दिखती है.

पहला चरण. देखें कि यह सुविधा किन मॉडल पर काम करती है

Browser Support

• 5
• 12
• 3.5
• 5

Source

जियोलोकेशन ऑब्जेक्ट की मौजूदगी की जांच करके, यह आसानी से पता लगाया जा सकता है कि आपका ब्राउज़र इस सुविधा के साथ काम करता है या नहीं:

// check for Geolocation support
if (navigator.geolocation) {
  console.log('Geolocation is supported!');
}
else {
  console.log('Geolocation is not supported for this Browser/OS version yet.');
}

दूसरा चरण. ट्रिप मीटर एचटीएमएल तय करना

इस उदाहरण में, ट्रिप मीटर बनाया जा रहा है. इसलिए, यह एचटीएमएल तय करें:

<div id="tripmeter">
<p>
Starting Location (lat, lon):<br/>
<span id="startLat">???</span>°, <span id="startLon">???</span>°
</p>
<p>
Current Location (lat, lon):<br/>
<span id="currentLat">???</span>°, <span id="currentLon">???</span>°
</p>
<p>
Distance from starting location:<br/>
<span id="distance">0</span> km
</p>
</div>

अगले कुछ चरणों में, Geolocation API का इस्तेमाल करके उन सभी खाली स्पैन को भरा जाएगा.

तीसरा चरण. उपयोगकर्ता की मौजूदा जगह की जानकारी का पता लगाना

getCurrentPosition(), उपयोगकर्ता की मौजूदा जगह की जानकारी को एसिंक्रोनस तरीके से रिपोर्ट करेगा. पेज लोड होते ही इसे कॉल करें, ताकि यह शुरुआती पोज़िशन को सही तरीके से पॉप्युलेट कर सके और बाद के लिए सेव कर सके:

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
});
};

अगर इस डोमेन पर मौजूद किसी ऐप्लिकेशन ने पहली बार अनुमतियों का अनुरोध किया है, तो आम तौर पर ब्राउज़र, उपयोगकर्ता की सहमति की जांच करेगा. ब्राउज़र के आधार पर, अनुमतियों की जांच करने की सुविधा को हमेशा के लिए चालू या बंद करने की प्राथमिकताएं भी हो सकती हैं. ऐसे में, पुष्टि करने की प्रोसेस को बायपास कर दिया जाएगा.

इस कोड को चलाने के बाद, आपको शुरुआती पोज़िशन दिखनी चाहिए. आपका ब्राउज़र जिस डिवाइस का इस्तेमाल कर रहा है उसकी जगह की जानकारी के आधार पर, पोज़िशन ऑब्जेक्ट में अक्षांश और देशांतर के अलावा और भी बहुत कुछ हो सकता है. उदाहरण के लिए, इसमें ऊंचाई या दिशा शामिल हो सकती है. कंसोल में पोज़िशन वैरिएबल को लॉग करके, इस बारे में ज़्यादा जानकारी हासिल की जा सकती है.

चौथा चरण. गड़बड़ियां ठीक करना

हालांकि, ऐसा हो सकता है कि कुछ मामलों में जगह की जानकारी न मिले. ऐसा हो सकता है कि जीपीएस की मदद से जगह की जानकारी न मिल पाई हो या उपयोगकर्ता ने अचानक जगह की जानकारी देखने की सुविधा बंद कर दी हो. गड़बड़ी होने पर, getCurrentPosition() के लिए दूसरा, वैकल्पिक, आर्ग्युमेंट कॉल किया जाएगा. इससे, कॉलबैक में उपयोगकर्ता को सूचना दी जा सकती है:

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
// same as above
}, function(error) {
alert('Error occurred. Error code: ' + error.code);
// error.code can be:
//   0: unknown error
//   1: permission denied
//   2: position unavailable (error response from locaton provider)
//   3: timed out
});
};

पांचवां चरण. उपयोगकर्ता की जगह की जानकारी पर नज़र रखना

getCurrentPosition() को किया गया पिछला कॉल, पेज लोड होने पर सिर्फ़ एक बार किया गया था. बदलावों को ट्रैक करने के लिए, watchPosition() का इस्तेमाल करें. जब भी उपयोगकर्ता मूव करेगा, तब यह कॉलबैक फ़ंक्शन को अपने-आप सूचना देगा:

navigator.geolocation.watchPosition(function(position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});

छठा चरण. तय की गई दूरी दिखाएं

यह चरण सीधे तौर पर Geolocation API से जुड़ा नहीं है. हालांकि, यह डेमो को पूरा करता है और इस बात का उदाहरण देता है कि जगह की जानकारी के डेटा का इस्तेमाल कैसे किया जा सकता है. तय की गई दूरी की जानकारी भरने के लिए, watchPosition() हैंडलर में एक और लाइन जोड़ें:

navigator.geolocation.watchPosition(function(position) {
// same as above
document.getElementById('distance').innerHTML =
    calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
                    position.coords.latitude, position.coords.longitude);
});

calculateDistance() फ़ंक्शन, दो निर्देशांकों के बीच की दूरी का पता लगाने के लिए, ज्यामितीय एल्गोरिदम का इस्तेमाल करता है. JavaScript को लागू करने का तरीका, क्रिएटिव कॉमंस लाइसेंस के तहत, Moveable Type की दी गई स्क्रिप्ट से लिया गया है:

function calculateDistance(lat1, lon1, lat2, lon2) {
var R = 6371; // km
var dLat = (lat2 - lat1).toRad();
var dLon = (lon2 - lon1).toRad();
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
}
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}