जियोलोकेशन एपीआई का इस्तेमाल करके एक आसान यात्रा मीटर

Michael Mahemoff

शुरुआती जानकारी

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

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

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

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

// 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>

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

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

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;
});
};

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

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

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

दुर्भाग्य से, सभी स्थान लुकअप सफल नहीं होते. शायद GPS नहीं मिला या उपयोगकर्ता ने अचानक स्थान की खोज बंद कर दी है. गड़बड़ी होने पर, 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;
});

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

यह चरण सीधे तौर पर जियोलोकेशन एपीआई से नहीं जुड़ा है. हालांकि, यह डेमो को पूरा करके, जगह की जानकारी के डेटा का इस्तेमाल करने के तरीके का उदाहरण देता है. तय की गई दूरी की जानकारी अपने-आप भरने के लिए, 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 लागू करने के लिए, क्रिएटिव कॉमंस लाइसेंस के तहत मूवेबल टाइप से दी गई स्क्रिप्ट से बदलाव किया जाता है:

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;
}