HTML Navigator geolocation प्रॉपर्टी: उपयोगकर्ता की स्थिति जानने का तरीका

HTML Navigator geolocation प्रॉपर्टी एक Geolocation ऑब्जेक्ट लौटाती है जिसका उपयोग उपयोगकर्ता की भौगोलिक स्थिति (latitude और longitude) प्राप्त करने के लिए किया जाता है। यह आधुनिक वेब एप्लिकेशन में स्थान-आधारित सेवाओं के लिए अत्यंत उपयोगी है।

सिंटैक्स (Syntax)

navigator.geolocation

उदाहरण (Example)

नीचे दिए गए उदाहरण में हम एक बटन बनाते हैं जिस पर क्लिक करने पर उपयोगकर्ता की वर्तमान स्थिति प्रदर्शित होती है।

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      color: #000;
      height: 100vh;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
      text-align: center;
      font-family: Arial, sans-serif;
    }
    .btn {
      background: #db133a;
      border: none;
      height: 2.5rem;
      border-radius: 20px;
      width: 300px;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1.5rem auto;
      font-size: 1rem;
      transition: background 0.3s;
    }
    .btn:hover {
      background: #b01030;
    }
    .show {
      font-size: 1.2rem;
      color: #fff;
      margin-top: 1rem;
      background: rgba(0,0,0,0.3);
      padding: 1rem;
      border-radius: 10px;
      display: inline-block;
      min-width: 300px;
    }
  </style>
</head>
<body>
  <h1>HTML Navigator geolocation प्रॉपर्टी डेमो</h1>
  <button class="btn" onclick="displayLocation()">अपनी स्थिति दिखाएं</button>
  <div class="show" id="locationDisplay"></div>

  <script>
    function displayLocation() {
      if (!navigator.geolocation) {
        document.getElementById('locationDisplay').innerHTML = '<p>आपका ब्राउज़र जियोलोकेशन सपोर्ट नहीं करता।</p>';
        return;
      }
      
      document.getElementById('locationDisplay').innerHTML = '<p>स्थिति प्राप्त की जा रही है...</p>';
      
      navigator.geolocation.getCurrentPosition(
        showPosition,
        showError,
        { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
      );
    }
    
    function showPosition(position) {
      const lat = position.coords.latitude;
      const lon = position.coords.longitude;
      const accuracy = position.coords.accuracy;
      
      document.getElementById('locationDisplay').innerHTML = `
        <p><strong>अक्षांश (Latitude):</strong> ${lat.toFixed(6)}</p>
        <p><strong>देशांतर (Longitude):</strong> ${lon.toFixed(6)}</p>
        <p><strong>सटीकता (Accuracy):</strong> ${accuracy} मीटर</p>
        <p><a href="https://www.google.com/maps?q=${lat},${lon}" target="_blank" style="color: #ffeb3b;">Google Maps पर देखें</a></p>
      `;
    }
    
    function showError(error) {
      let message = '';
      switch(error.code) {
        case error.PERMISSION_DENIED:
          message = 'उपयोगकर्ता ने स्थान साझा करने की अनुमति नहीं दी।';
          break;
        case error.POSITION_UNAVAILABLE:
          message = 'स्थान जानकारी उपलब्ध नहीं है।';
          break;
        case error.TIMEOUT:
          message = 'स्थान प्राप्त करने का अनुरोध टाइम आउट हो गया।';
          break;
        default:
          message = 'एक अज्ञात त्रुटि हुई।';
      }
      document.getElementById('locationDisplay').innerHTML = `<p style="color: #ff6b6b;">${message}</p>`;
    }
  </script>
</body>
</html>

आउटपुट (Output)

जब आप "अपनी स्थिति दिखाएं" बटन पर क्लिक करते हैं, तो ब्राउज़र स्थान साझा करने की अनुमति मांगेगा। अनुमति देने के बाद आपकी अक्षांश और देशांतर निर्देशांक प्रदर्शित होंगे।

अनुमति मिलने के बाद निर्देशांक दिखाए जाएंगे:

महत्वपूर्ण बिंदु

• HTTPS आवश्यक: जियोलोकेशन API केवल HTTPS या localhost पर काम करता है।
• उपयोगकर्ता अनुमति: उपयोगकर्ता को स्थान साझा करने की स्पष्ट अनुमति देनी होती है।
• त्रुटि संचालन: हमेशा त्रुटि कॉलबैक का उपयोग करें ताकि असफलताओं को उचित तरीके से संभाला जा सके।
• विकल्प: getCurrentPosition() के तीसरे पैरामीटर में आप सटीकता, टाइमआउट और कैश सेटिंग्स नियंत्रित कर सकते हैं।

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

सभी आधुनिक ब्राउज़र (Chrome 5+, Firefox 3.5+, Safari 5+, Edge 12+, Opera 16+) इस API का समर्थन करते हैं।