Jassif Team Institution

HTML Geolocation API

जियोलोकेशन एपीआई का उपयोग उपयोगकर्ता की वर्तमान स्थिति जानने के लिए किया जाता है।

उपयोगकर्ता के स्थान का पता लगाना

जियोलोकेशन एपीआई का उपयोग उपयोगकर्ता के वर्तमान स्थान तक पहुंचने के लिए किया जाता है।

चूंकि यह गोपनीयता से समझौता कर सकता है, इसलिए स्थान तब तक उपलब्ध नहीं होता जब तक उपयोगकर्ता इसे अधिकृत नहीं करता।

ब्राउज़र समर्थन

तालिका में संख्याएँ पहले ब्राउज़र संस्करण का प्रतिनिधित्व करती हैं जो जियोलोकेशन का पूरी तरह से समर्थन करता है।

HTML जियोलोकेशन एपीआई का उपयोग करना

Geolocation API navigator.geolocationको कॉल द्वारा एक्सेस किया जाता है, यह उपयोगकर्ता से ब्राउज़र को उपयोगकर्ता के स्थान डेटा तक पहुंचने की अनुमति देने के लिए कहेगा। यदि उपयोगकर्ता स्वीकार करता है, तो ब्राउज़र इस जानकारी तक पहुंचने के लिए डिवाइस पर उपलब्ध सर्वोत्तम कार्यक्षमता (उदाहरण के लिए जीपीएस) की तलाश करेगा।

getCurrentPosition()उपयोगकर्ता के वर्तमान स्थान को वापस करने के लिए विधि का उपयोग किया जाता है।

नीचे दिया गया उदाहरण उपयोगकर्ता के वर्तमान स्थान का अक्षांश और देशांतर लौटाता है:

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success, error);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function success(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}

function error() {
  alert("Sorry, no position available.");
}
</script>

उदाहरण स्पष्टीकरण:

1. जांचें कि क्या जियोलोकेशन समर्थित है
2. यदि जियोलोकेशन समर्थित है,getCurrentPosition()विधि चलाएँ. अन्यथा, उपयोगकर्ता को एक संदेश प्रदर्शित करें
3. success()फ़ंक्शन उपयोगकर्ता के स्थान को अक्षांश और देशांतर में आउटपुट करता है
4. error()समारोहgetCurrentPosition()ब्राउज़र में एक टेक्स्ट चेतावनी देते हुए एक त्रुटि आती है

त्रुटि प्रबंधन और अस्वीकरण

getCurrentPosition()विधि का दूसरा पैरामीटर त्रुटियों को संभालने के लिए उपयोग किया जाता है। यदि उपयोगकर्ता का स्थान प्राप्त करने में विफल रहता है तो निष्पादित करने के लिए फ़ंक्शन निर्दिष्ट करता है।

यहां अधिक विशिष्ट त्रुटि प्रबंधन का एक उदाहरण दिया गया है:

function error(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}

स्थान-विशिष्ट जानकारी

स्थान-विशिष्ट जानकारी के लिए जियोलोकेशन भी बहुत उपयोगी है, उदाहरण के लिए:

• नवीनतम स्थानीय जानकारी
• उपयोगकर्ता के निकट आकर्षण दिखा रहा है
• जीपीएस (जीपीएस)

getCurrentPosition()विधि - डेटा सबमिशन

getCurrentPosition()विधि सफल होने पर किसी ऑब्जेक्ट को वापस कर देती है। अक्षांश, देशांतर और परिशुद्धता गुण हमेशा प्रदान किए जाते हैं। यदि उपलब्ध हो तो अन्य संपत्तियाँ प्रदान की जाती हैं:

जिओलोकेशन का मतलब है - अन्य दिलचस्प तरीके

जियोलोकेशन ऑब्जेक्ट में अन्य दिलचस्प तरीके भी हैं:

• watchPosition()- उपयोगकर्ता का वर्तमान स्थान प्रदान करता है और उपयोगकर्ता के चलते समय अद्यतन स्थान प्रदान करता रहता है (जैसे कार में जीपीएस)।
• clearWatch() - watchPosition()विधि को रोकता है.

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(success, error);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function success(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}

function error(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}
</script>

इंटरैक्टिव दृष्टिकोण

अभ्यास