React कंपोनेंट में Geolocation API

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options) उपकरण का स्थान एक बार माँगता है। सफलता कॉलबैक को GeolocationPosition ऑब्जेक्ट प्राप्त होता है। यह तब उपयुक्त है जब आपको स्थान केवल एक बार चाहिए, जैसे बटन क्लिक होने पर सबसे निकट की दुकान ढूँढना, न कि लगातार गति पर नज़र रखना।

navigator.geolocation.watchPosition(successCallback, errorCallback, options) उपकरण का स्थान बदलने पर हर बार कॉलबैक को लगातार चलाता है। यह एक संख्यात्मक watchId लौटाता है। यह डिलीवरी की निगरानी या बारी-बारी से दिशा-निर्देशन जैसे वास्तविक-समय उपयोगों के लिए उपयुक्त है, जहाँ स्थान वर्तमान बना रहना चाहिए।

GeolocationPosition ऑब्जेक्ट में coords गुण होता है, जिसमें latitude, longitude और accuracy (मीटर में) शामिल होते हैं। अतिरिक्त वैकल्पिक फ़ील्ड में altitude, altitudeAccuracy, heading और speed शामिल हैं। timestamp फ़ील्ड यह दर्ज करता है कि स्थान कब प्राप्त किया गया था।

त्रुटि कॉलबैक को संख्यात्मक code गुण वाला GeolocationPositionError प्राप्त होता है। कोड 1 का अर्थ PERMISSION_DENIED है (उपयोगकर्ता ने अस्वीकार कर दिया), कोड 2 का अर्थ POSITION_UNAVAILABLE है (हार्डवेयर या नेटवर्क विफलता), और कोड 3 का अर्थ TIMEOUT है (अनुरोध में बहुत अधिक समय लगा)। इन तीनों स्थितियों को हमेशा सँभालें।

watchPosition श्रोता तब तक अनिश्चित समय तक चलता रहता है, जब तक आप उसे रोक नहीं देते। useEffect में एक साफ़-सफ़ाई फ़ंक्शन लौटाएँ, जो navigator.geolocation.clearWatch(watchId) को कॉल करे। यदि आप साफ़-सफ़ाई भूल जाते हैं, तो घटक के हटाए जाने के बाद भी निगरानी चलती रहती है, बैटरी खर्च करती है और संभवतः हटाई जा चुकी स्थिति को अपडेट करती है।

useGeolocation हुक चार संभावित मानों वाली स्थिति सँभालता है: idle (अभी अनुरोध नहीं किया गया), loading (अनुरोध जारी है), success (स्थान प्राप्त हो गया) और error (विफलता)। यह position और errorMessage को भी स्थिति में रखता है। घटकों को एक सरल और सुसंगत इंटरफ़ेस प्राप्त होता है।

जब उपयोगकर्ता जियोलोकेशन अस्वीकार करे, तो एक सहायक संदेश दिखाएँ जिसमें समझाया गया हो कि सुविधा को स्थान की पहुँच क्यों चाहिए और ब्राउज़र सेटिंग्स में इसे फिर से कैसे सक्षम किया जा सकता है। उपयोगकर्ताओं को कभी भी कच्चा त्रुटि कोड न दिखाएँ। मैन्युअल पता दर्ज करने का वैकल्पिक उपाय दें, ताकि स्थान की अनुमति के बिना भी सुविधा उपयोगी बनी रहे।

अधिकांश शक्तिशाली ब्राउज़र एपीआई की तरह, जियोलोकेशन भी सुरक्षित संदर्भों तक सीमित है। साधारण HTTP पृष्ठों पर navigator.geolocation का मान undefined होता है। विकास के दौरान localhost पर यह HTTPS के बिना भी काम करता है। उत्पादन में हमेशा सुनिश्चित करें कि आपका ऐप HTTPS के माध्यम से उपलब्ध हो, वरना उपयोगकर्ताओं से अनुमति कभी नहीं माँगी जाएगी।

getCurrentPosition और watchPosition का वैकल्पिक तीसरा तर्क एक विकल्प ऑब्जेक्ट स्वीकार करता है। enableHighAccuracy: true अधिक ऊर्जा खर्च होने की कीमत पर GPS-जैसी सटीकता माँगता है। timeout प्रतीक्षा करने के लिए अधिकतम मिलीसेकंड निर्धारित करता है। maximumAge तब कैश किया हुआ स्थान स्वीकार करता है, जब वह निर्दिष्ट मिलीसेकंड के भीतर प्राप्त किया गया हो।

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

Chrome DevTools आपको नकली उपकरण स्थान निर्धारित करने देता है। DevTools खोलें, तीन-बिंदु वाले मेनू पर जाएँ, फिर More tools और उसके बाद Sensors चुनें। किसी भी स्थान का अनुकरण करने के लिए आप अक्षांश और देशांतर निर्देशांक लिख सकते हैं। स्थान-निर्भर सुविधाओं का परीक्षण करने के लिए यह वास्तव में उस स्थान तक जाने से कहीं तेज़ है।

एक बार स्थान पढ़ने के लिए getCurrentPosition और लगातार निगरानी के लिए watchPosition का उपयोग करें। useEffect की साफ़-सफ़ाई में हमेशा clearWatch को कॉल करें। idle, loading, success और error स्थितियों वाला useGeolocation हुक बनाएँ। अनुमति अस्वीकार होने को सहज ढंग से सँभालें और याद रखें कि उत्पादन में जियोलोकेशन के लिए HTTPS आवश्यक है।