वेब जियोलोकेशन एपीआई
उपयोगकर्ता की स्थिति का पता लगाएँ
HTML जिओलोकेशन एपीआई का उपयोग उपयोगकर्ता की भौगोलिक स्थिति प्राप्त करने के लिए किया जाता है।
चूंकि यह गोपनीयता से समझौता कर सकता है, स्थिति तब तक उपलब्ध नहीं है जब तक उपयोगकर्ता इसे मंजूरी नहीं देता।
नोट: स्मार्टफोन जैसे जीपीएस वाले उपकरणों के लिए जियोलोकेशन सबसे सटीक है।
जिओलोकेशन एपीआई सभी ब्राउज़रों में समर्थित है:
| Yes | Yes | Yes | Yes | Yes |
नोट: क्रोम 50 के रूप में, जियोलोकेशन एपीआई केवल HTTPS जैसे सुरक्षित संदर्भों पर काम करेगा। यदि आपकी साइट एक गैर-सुरक्षित मूल (जैसे HTTP) पर होस्ट की गई है, तो उपयोगकर्ता स्थान प्राप्त करने के अनुरोध अब काम नहीं करेंगे।
जियोलोकेशन एपीआई का उपयोग करना
विधि का getCurrentPosition()उपयोग उपयोगकर्ता की स्थिति को वापस करने के लिए किया जाता है।
नीचे दिया गया उदाहरण उपयोगकर्ता की स्थिति का अक्षांश और देशांतर देता है:
उदाहरण
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
उदाहरण समझाया:
- जांचें कि क्या जियोलोकेशन समर्थित है
- यदि समर्थित है, तो getCurrentPosition () विधि चलाएँ। यदि नहीं, तो उपयोगकर्ता को एक संदेश प्रदर्शित करें
- यदि getCurrentPosition () विधि सफल होती है, तो यह पैरामीटर (शोपोजिशन) में निर्दिष्ट फ़ंक्शन के लिए एक निर्देशांक ऑब्जेक्ट देता है।
- शोपोजिशन () फ़ंक्शन अक्षांश और देशांतर को आउटपुट करता है
ऊपर दिया गया उदाहरण एक बहुत ही बुनियादी जियोलोकेशन स्क्रिप्ट है, जिसमें कोई त्रुटि प्रबंधन नहीं है।
त्रुटियों और अस्वीकृति को संभालना
विधि के दूसरे पैरामीटर का getCurrentPosition()उपयोग त्रुटियों को संभालने के लिए किया जाता है। यदि यह उपयोगकर्ता का स्थान प्राप्त करने में विफल रहता है तो यह चलाने के लिए एक फ़ंक्शन निर्दिष्ट करता है:
उदाहरण
function showError(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;
}
}
एक मानचित्र में परिणाम प्रदर्शित करना
परिणाम को मानचित्र में प्रदर्शित करने के लिए, आपको 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+"'>";
}
स्थान-विशिष्ट जानकारी
इस पृष्ठ ने प्रदर्शित किया है कि मानचित्र पर उपयोगकर्ता की स्थिति कैसे दिखाई जाती है।
स्थान-विशिष्ट जानकारी के लिए जियोलोकेशन भी बहुत उपयोगी है, जैसे:
- अप-टू-डेट स्थानीय जानकारी
- उपयोगकर्ता के पास रुचि के स्थान दिखा रहा है
- बारी-बारी से नेविगेशन (जीपीएस)
GetCurrentPosition () विधि - डेटा लौटाएं
getCurrentPosition()विधि सफलता पर एक वस्तु लौटाती है । अक्षांश, देशांतर और सटीकता गुण हमेशा लौटाए जाते हैं। अन्य गुण उपलब्ध होने पर वापस कर दिए जाते हैं:
| Property | Returns |
|---|---|
| coords.latitude | The latitude as a decimal number (always returned) |
| coords.longitude | The longitude as a decimal number (always returned) |
| coords.accuracy | The accuracy of position (always returned) |
| coords.altitude | The altitude in meters above the mean sea level (returned if available) |
| coords.altitudeAccuracy | The altitude accuracy of position (returned if available) |
| coords.heading | The heading as degrees clockwise from North (returned if available) |
| coords.speed | The speed in meters per second (returned if available) |
| timestamp | The date/time of the response (returned if available) |
जियोलोकेशन ऑब्जेक्ट - अन्य दिलचस्प तरीके
जियोलोकेशन ऑब्जेक्ट में अन्य दिलचस्प तरीके भी हैं:
watchPosition()- उपयोगकर्ता की वर्तमान स्थिति लौटाता है और जैसे ही उपयोगकर्ता चलता है (जैसे कार में जीपीएस) अद्यतन स्थिति लौटाता रहता है।clearWatch()watchPosition()- विधि रोकता है ।
नीचे दिया गया उदाहरण watchPosition()विधि दिखाता है। इसका परीक्षण करने के लिए आपको एक सटीक जीपीएस डिवाइस की आवश्यकता है (जैसे स्मार्टफोन):
उदाहरण
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>