इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

Michael Mahemoff

परिचय

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

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

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

Browser Support

Source

जगह की जानकारी वाले ऑब्जेक्ट की मौजूदगी की जांच करके, आसानी से यह पता लगाया जा सकता है कि आपका ऐप्लिकेशन, Google Maps के साथ काम करता है या नहीं:

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

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

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

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

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