वेब जी लोकेशन एपीआई
- पिछला पृष्ठ वेब फेच एपीआई
- अगला पृष्ठ एज़केज़ - सराहना
स्थानीय स्थान निर्धारित करना
HTML जीओलोकेशन एपीआई उपयोगकर्ता के स्थानीय स्थान को प्राप्त करने के लिए उपयोग किया जाता है।
यह गोपनीयता को नुकसान पहुंचा सकता है, जब तक उपयोगकर्ता अनुमति नहीं देता, स्थान उपलब्ध नहीं है।
टिप्पणी:जीपीएस वाले उपकरण (जैसे स्मार्टफोन) के लिए भूगोल स्थानन का सबसे सटीक रूप है।
सभी ब्राउज़र Geolocation API का समर्थन करते हैं:
| Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|
| समर्थन | समर्थन | समर्थन | समर्थन | समर्थन |
टिप्पणी:Chrome 50 से लेकर, Geolocation API केवल सुरक्षित संदर्भ (जैसे HTTPS) में उपयोग किया जाएगा। अगर आपका साइट असुरक्षित स्रोत (जैसे HTTP) पर मेंटो है, तो उपयोगकर्ता के स्थान की अनुरोध की जाँच नहीं काम करेगी
Geolocation API का उपयोग करना
getCurrentPosition() यह विधि उपयोगकर्ता के स्थान को वापस करने के लिए उपयोग की जाती है
नीचे का उदाहरण उपयोगकर्ता के स्थान के अक्षांश और देशांतर को वापस करता है:
इंस्टांस
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
x.innerHTML = "इस ब्राउज़र द्वारा जीओलोकेशन समर्थित नहीं है.";
}
}
function showPosition(position) {
x.innerHTML = "लैटिट्यूड: " + position.coords.latitude +
"<br>लॉगिट्यूड: " + position.coords.longitude;
}
</script>
उदाहरण व्याख्या:
- Geolocation के समर्थन की जाँच करें
- यदि समर्थन हो, तो getCurrentPosition() विधि चलाएं। नहीं तो उपयोगकर्ता को संदेश दिखाएं
- यदि getCurrentPosition() विधि सफल होती है, तो एक coordinates ऑब्जैक्ट को (showPosition) में निर्दिष्ट फ़ंक्शन को परिणाम देती है
- showPosition() फ़ंक्शन अक्षांश और देशांतर को आउटपुट करता है
उपरोक्त उदाहरण एक बहुत ही आसान भूगोल स्थान शीट है, जिसमें त्रुटि का संभालन नहीं है。
त्रुटि और अस्वीकार को संभालना
getCurrentPosition() विधि का दूसरा पारामीटर त्रुटि को संभालने के लिए उपयोग किया जाता है। यदि उपयोगकर्ता का स्थान प्राप्त नहीं किया जाता, तो इस विधि को चलाने के लिए निर्दिष्ट किया जाता है:
इंस्टांस
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "उपयोगकर्ता ने स्थान निर्धारण के अनुरोध को अस्वीकार कर दिया है."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "स्थान सूचना उपलब्ध नहीं है."
break;
case error.TIMEOUT:
x.innerHTML = "उपयोगकर्ता स्थान के लिए अनुरोध के लिए समय समाप्त हो गया."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "एक अज्ञात त्रुटि हुई है."
break;
}
}
मानचित्र में परिणाम दिखाना
यदि आप कार्यक्रम को मानचित्र पर दिखाना चाहते हैं, तो आपको मानचित्र सेवा को देखना होगा, जैसे Google मानचित्र。
नीचे के उदाहरण में, वापस की अक्षांश और देशांतर को Google मानचित्र में स्थिति को दिखाने के लिए इस्तेमाल किया जाता है (स्थायी छवि के रूप में):
इंस्टांस
function showPosition(position) {
let latlon = position.coords.latitude + "," + position.coords.longitude;
let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
"+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
स्थानीय जानकारी
यह पृष्ठ इसे दर्शाता है कि कैसे नक्शे पर उपयोगकर्ता की स्थिति को दिखाया जाता है。
Geolocation विशेष स्थानीय सूचना के लिए भी बहुत उपयोगी है, जैसे कि:
- सबसे नई स्थानीय सूचना
- उपयोगकर्ता के पास के इंटरेस्टिंग प्वाइंट्स को दिखाएं
- एक-एक दिशा में नेविगेशन (Turn-by-turn navigation) (GPS)
getCurrentPosition() विधि - डाटा वापस करना
getCurrentPosition() विधि सफल होने पर एक ऑब्जैक्ट वापस करती है। हमेशा वापस करती है अक्षांश, देशांतर और निखार गुण। उपलब्ध होने पर अन्य गुण वापस करती है:
| गुण | वापस |
|---|---|
| coords.latitude | दशमलवीं दूरी में अक्षांश (हमेशा वापस करें). |
| coords.longitude | दशमलवीं दूरी में देशांतर (हमेशा वापस करें). |
| coords.accuracy | स्थान की निखार (हमेशा वापस करें). |
| coords.altitude | सामान्य समुद्री सतह से ऊपर की ऊंचाई (मीटर में) (उपलब्ध होने पर वापस करें). |
| coords.altitudeAccuracy | स्थान की ऊंचाई निखार (उपलब्ध होने पर वापस करें). |
| coords.heading | उत्तर की ओर से प्रत्यक्षवादी दिशा (उपलब्ध होने पर वापस करें). |
| coords.speed | मीटर/सेकंड में गति (उपलब्ध होने पर वापस करें). |
| timestamp | प्रतिक्रिया की तारीख/समय (उपलब्ध होने पर वापस करें). |
Geolocation ऑब्जैक्ट - अन्य रोचक विधियाँ
Geolocation ऑब्जैक्ट के पास अन्य रोचक विधियाँ भी हैं:
watchPosition()- उपयोगकर्ता की वर्तमान स्थिति को वापस करें और उपयोगकर्ता के गति के साथ (जैसे कार में GPS) अद्यतन स्थिति को लौटाएं。clearWatch()- watchPosition () विधि को रोकें。
नीचे के उदाहरण में दिखाया गया है}} watchPosition() तरीके।आपको सही जीपीएस उपकरण (उदाहरण के लिए स्मार्टफोन) की जरूरत है कि इसे परीक्षण करें:
इंस्टांस
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
}
x.innerHTML = "इस ब्राउज़र द्वारा जीओलोकेशन समर्थित नहीं है.";
}
}
function showPosition(position) {
x.innerHTML = "लैटिट्यूड: " + position.coords.latitude +
"<br>लॉगिट्यूड: " + position.coords.longitude;
}
</script>
- पिछला पृष्ठ वेब फेच एपीआई
- अगला पृष्ठ एज़केज़ - सराहना
