Geolocation API React-komponenteissa

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options) pyytää laitteen sijainnin kerran. Onnistumisen takaisinkutsu vastaanottaa GeolocationPosition-objektin. Tämä sopii tilanteisiin, joissa sijaintia tarvitaan vain kerran, esimerkiksi lähimmän myymälän etsimiseen painiketta napsautettaessa, eikä jatkuvan liikkumisen seuraamiseen.

navigator.geolocation.watchPosition(successCallback, errorCallback, options) kutsuu takaisinkutsua jatkuvasti aina, kun laitteen sijainti muuttuu. Se palauttaa numeerisen watchId-tunnisteen. Tämä sopii reaaliaikaisiin käyttötapauksiin, kuten toimitusten seurantaan tai käännös käännökseltä -navigointiin, jossa sijainnin on pysyttävä ajan tasalla.

GeolocationPosition-objekti sisältää coords-ominaisuuden, jossa ovat latitude, longitude ja accuracy (metreinä). Muita valinnaisia kenttiä ovat altitude, altitudeAccuracy, heading ja speed. timestamp-kenttä tallentaa ajan, jolloin sijainti määritettiin.

Virhetakaisinkutsu vastaanottaa GeolocationPositionError-objektin, jolla on numeerinen code-ominaisuus. Koodi 1 on PERMISSION_DENIED (käyttäjä kieltäytyi), koodi 2 on POSITION_UNAVAILABLE (laitteisto- tai verkkohäiriö) ja koodi 3 on TIMEOUT (pyyntö kesti liian kauan). Käsitelkää aina kaikki kolme tapausta.

watchPosition-kuuntelija toimii jatkuvasti, kunnes pysäytätte sen. Palauttakaa useEffect-funktiossa siivousfunktio, joka kutsuu navigator.geolocation.clearWatch(watchId)-funktiota. Jos siivous unohtuu, seuranta jatkuu komponentin poistamisen jälkeen, kuluttaa akkua ja saattaa päivittää poistettua tilaa.

useGeolocation-hook hallitsee tilaa, jolla on neljä mahdollista arvoa: idle (pyyntöä ei ole vielä tehty), loading (pyyntöä käsitellään), success (sijainti vastaanotettu) ja error (pyyntö epäonnistui). Se säilyttää tilassa myös position- ja errorMessage-arvot. Komponentit saavat selkeän ja yhdenmukaisen rajapinnan.

Kun käyttäjä kieltää geolocationin käytön, näyttäkää hyödyllinen viesti, jossa selitetään, miksi ominaisuus tarvitsee sijaintitiedot ja miten käyttöoikeus voidaan ottaa uudelleen käyttöön selaimen asetuksissa. Älkää näyttäkö käyttäjille raakaa virhekoodia. Tarjotkaa osoitteen manuaalinen syöttäminen varavaihtoehtona, jotta ominaisuutta voi käyttää ilman sijaintilupaa.

Useimpien tehokkaiden selain-API:en tavoin geolocation on rajoitettu suojattuihin konteksteihin. navigator.geolocation on undefined tavallisilla HTTP-sivuilla. Kehityksen aikana se toimii localhost-osoitteessa ilman HTTPS:ää. Varmistakaa tuotannossa aina, että sovellusta tarjotaan HTTPS:n kautta, muuten käyttäjiltä ei koskaan pyydetä käyttöoikeutta.

getCurrentPosition- ja watchPosition-funktioiden valinnainen kolmas argumentti hyväksyy asetuskohteen. enableHighAccuracy: true pyytää GPS-tasoista tarkkuutta suuremman virrankulutuksen kustannuksella. timeout määrittää enimmäisajan millisekunteina. maximumAge sallii välimuistissa olevan sijainnin käytön, jos se on määritetty annetun millisekuntimäärän kuluessa.

Geolocation mahdollistaa esimerkiksi ominaisuudet "etsi lähelläni oleva myymälä", toimituskuljettajan seurannan kartalla, nykyiseen kaupunkiin perustuvan sään, sijainnilla merkittyjen julkaisujen ja käyttäjän sekä määränpään välisten etäisyyksien laskemisen. Viestikää käyttäjille aina selkeästi, miksi sovellus tarvitsee heidän sijaintinsa, ennen kuin pyydätte käyttöoikeutta.

Chrome DevToolsin avulla voitte määrittää laitteen valesijainnin. Avatkaa DevTools, siirtykää kolmen pisteen valikkoon ja valitkaa Lisää työkaluja sekä Sensorit. Voitte syöttää leveys- ja pituusasteen koordinaatit ja simuloida mitä tahansa sijaintia. Tämä on paljon nopeampaa kuin matkustaa fyysisesti eri paikkaan sijainnista riippuvien ominaisuuksien testaamista varten.

Käyttäkää getCurrentPosition-funktiota sijainnin lukemiseen kerran ja watchPosition-funktiota jatkuvaan seurantaan. Kutsukaa aina clearWatch-funktiota useEffectin siivousfunktiossa. Rakentakaa useGeolocation-hook, jossa ovat idle-, loading-, success- ja error-tilat. Käsitelkää käyttöoikeuden epääminen hallitusti ja muistakaa, että geolocation edellyttää tuotannossa HTTPS:ää.