Share
Al vele jaren zijn papieren kaarten een antiek geworden. Ze zijn vervangen door speciale GPS-navigatieapparaten en mobiele applicaties die alomtegenwoordig zijn geworden. Je vindt ze in auto's en, nog belangrijker, op tablets en smartphones.
Een van de belangrijkste kenmerken van een navigatieapparaat is het detecteren van de huidige positie van het apparaat en het bijwerken wanneer het verandert. Dit helpt ons om van de ene locatie naar de andere te gaan door ons aanwijzingen te geven.
Vandaag hebben we het geluk dat geolocatie standaard wordt ondersteund door browsers. In dit artikel zullen we de Geolocation API bespreken, zodat applicaties de locatie van het apparaat kunnen detecteren en volgen.
De mogelijkheid om de locatie van het apparaat te detecteren heeft een breed scala aan toepassingen. Op het web gebruiken Google, Microsoft en Yahoo bijvoorbeeld de locatie van de gebruiker om de SERP's (Zoekmachine-resultatenpagina) aan te passen op basis van de locatie van de gebruiker. Lokalisatie is een andere uitstekende fit voor geolocatie.
De Geolocation API definieert een interface op hoog niveau met locatie-informatie, zoals breedtegraad en lengtegraad, die is gekoppeld aan het apparaat dat de implementatie host. De API zelf is agnostisch voor de onderliggende locatie-informatiebronnen.
Algemene bronnen van locatie-informatie omvatten het Global Positioning System (GPS) en locatie-informatie afgeleid van netwerksignalen zoals het IP-adres van het apparaat, RFID, Wi-Fi, Bluetooth, MAC-adressen, GSM / CDMA-cel-ID's en gebruikersinvoer. Er wordt geen garantie gegeven dat de API de werkelijke locatie van het apparaat retourneert.
De geolocatie-API is een W3C-aanbeveling, wat betekent dat de specificatie stabiel is. We kunnen aannemen dat het in de toekomst niet zal veranderen, tenzij er aan een nieuwe versie wordt gewerkt. Het is vermeldenswaard dat de Geolocation API niet officieel deel uitmaakt van de HTML5-specificatie, omdat deze apart is ontwikkeld.
Nu we weten wat de Geolocation-API is en wat deze kan doen, is het tijd om te zien welke methoden worden blootgesteld aan ontwikkelaars.
De API gebruikt verschillende bronnen om de positie van het apparaat te detecteren. Op een notebook of desktopcomputer zonder GPS-chip is de kans groot dat de positie wordt afgeleid van het IP-adres van het apparaat. Dit betekent dat de door de API geretourneerde locatie niet erg nauwkeurig is.
Op een mobiel apparaat kan de API echter informatie gebruiken van meerdere en nauwkeurigere bronnen, zoals de GPS-chip van het apparaat, de netwerkverbinding (wifi, 3G, HSPA +) en de GSM / CDMA-cel. U kunt nauwkeuriger locatiegegevens verwachten op een mobiel apparaat, vooral als GPS is ingeschakeld.
De specificatie van de Geolocation API bespreekt ook privacy en permissies. In de specificatie wordt duidelijk aangegeven dat de toestemming van de gebruiker expliciet moet worden verkregen voordat de API wordt ingeschakeld.
Wat dit betekent, is dat de browser een melding aan de gebruiker moet weergeven om toestemming te vragen. Een voorbeeld van het bericht getoond aan de gebruiker wordt hieronder getoond (Google Maps).
De API beschrijft drie methoden die behoren tot de window.navigator.geolocation voorwerp. De geboden methoden zijn:
Accentsconagua
getCurrentPositionwatchPositionclearWatchif (window.navigator && window.navigator.geolocation) // Ik kan je overal bekijken ... else // Niet ondersteund
Om de locatie van het apparaat te detecteren, bellen we getCurrentPosition of watchPosition, afhankelijk van uw behoeften. Beide methoden voeren dezelfde taak uit met slechts een paar kleine verschillen.
Om de locatie van het apparaat te verkrijgen, getCurrentPosition en watchPosition een asynchroon verzoek doen. Het verschil tussen deze methoden is dat getCurrentPosition voert een eenmalig verzoek uit, terwijl watchPosition bewaakt de locatie van het apparaat op veranderingen en meldt de toepassing wanneer er een locatiewijziging plaatsvindt.
De Geolocation-API is slim genoeg om alleen de succesterugroep van te activeren watchPosition-aangeroepen wanneer de positie wordt verkregen-als de locatie van de gebruiker verandert.
Een ander belangrijk verschil tussen getCurrentPosition en watchPosition is de retourwaarde van elke methode. De getCurrentPosition methode retourneert niets, terwijl watchPosition geeft een identifier terug die kan worden gebruikt om te voorkomen dat de API de locatie van het apparaat bewaakt via de clearWatch functie.
De handtekeningen van getCurrentPosition en watchPosition er uitzien als dit:
// Get Current Position getCurrentPosition (successCallback [, errorCallback [, options]]) // Watch Position watchPosition (successCallback [, errorCallback [, options]])
Zoals de handtekeningen aangeven, accepteert elke functie drie parameters. Alleen het eerste argument, de succes-callback-functie, is vereist. Laten we elk argument van dichterbij bekijken.
successCallback: Deze callback-functie wordt uitgevoerd nadat de locatie van de gebruiker met succes is verkregen. De terugbelfunctie accepteert een positie object dat de locatiegegevens van het apparaat bevat.errorCallback: De fout callback wordt uitgevoerd wanneer een fout wordt aangetroffen. De fout terugbellen accepteert een fout object, met informatie over het type fout dat is opgetreden.opties: De opties object geeft de ontwikkelaar de mogelijkheid om het asynchrone verzoek te configureren.Bekijk de volgende fragmenten om te zien hoe u deze kunt gebruiken getCurrentPosition en watchPosition om de locatie van het apparaat te verkrijgen.
var geolocation = null; if (window.navigator && window.navigator.geolocation) geolocation = window.navigator.geolocation; if (geolocatie) geolocation.getCurrentPosition (functie (positie) console.log (positie);); var identifier = geolocation.watchPosition (functie (positie) console.log (positie);); console.log (id);
In het vorige gedeelte noemde ik het clearWatch functie. Met deze functie kunt u stoppen met het volgen van de locatie van het apparaat, geïnitieerd door aan te roepen watchPosition.
De clearWatch functie accepteert één vereist argument, de identifier wordt teruggestuurd na het oproepen watchPosition.
Nu we de technische details van de Geolocation API hebben behandeld, is het tijd om de positie, fout, en opties objecten geretourneerd door de Geolocation API.
PositieDe methoden die door de Geolocation API worden weergegeven, accepteren of retourneren drie soorten objecten. Het eerste object dat voor ons van belang is, is het positie object, dat de locatie-informatie bevat waarin we geïnteresseerd zijn. Bekijk de volgende tabel om een idee te krijgen van de informatie die deze bevat.
Het positieobject dat is teruggezonden van de succes-callbacks van getCurrentPosition en watchPosition bevat een tijdstempel en coords eigendom. De coords eigenschap is een object dat de locaties bevat breedtegraad, Lengtegraad, hoogte, nauwkeurigheid, altitudeAccuracy, titel, en snelheid.
De meeste desktopbrowsers retourneren geen waarde voor de hoogte, altitudeAccuracy, titel, en snelheid eigenschappen. Mobiele apparaten, zoals smartphones en tablets, bieden echter meer accurate informatie dankzij de aanwezigheid van een GPS-chip of andere hardware die helpt bij het detecteren van de locatie van het apparaat.
De tijdstempel eigenschap bevat de tijd dat de locatie werd gedetecteerd, wat handig kan zijn als u wilt weten hoe vers de gegevens zijn die zijn geretourneerd.
PositionErrorDe fout object van de fout terugbellen, het optionele tweede argument van getCurrentPosition en watchPosition, heeft een code en een bericht eigendom.
De bericht eigenschap beschrijft in het kort het type fout. De code property kan een van de volgende vier waarden hebben:
0: De aanvraag is mislukt, maar de reden is niet bekend.1: De aanvraag is mislukt omdat de gebruiker geen toestemming heeft gegeven om de locatie van het apparaat te gebruiken.2: De aanvraag is mislukt als gevolg van een netwerkfout.3: De aanvraag is mislukt omdat het te lang duurde om de positie van het apparaat op te lossen.PositionOptionsHet optionele derde argument van getCurrentPosition en watchPosition is een PositionOptions object, waardoor de ontwikkelaar het asynchrone verzoek kan aanpassen.
Het PositionOptions-object ondersteunt momenteel drie opties:
enableHighAccuracy: Als de waarde is ingesteld op waar, de webpagina of applicatie geeft aan dat het het best mogelijke, meest nauwkeurige resultaat wil. Dit kan resulteren in een lagere reactietijd of een hoger energieverbruik. De standaardwaarde is vals.time-out: Deze eigenschap geeft het maximale aantal milliseconden aan, waarna de aanvraag als buiten de tijd moet worden beschouwd. De standaardwaarde is Oneindigheid.jaar Maximum: Wanneer een locatieverzoek succesvol is, slaat de browser het resultaat in cache voor later gebruik. De jaar Maximum property geeft de tijd aan waarna de cache ongeldig moet worden gemaakt. De standaardwaarde is 0, wat betekent dat het verzoek niet in de cache mag worden geplaatst.Ondersteuning voor de Geolocation-API is echt goed. Dit geldt voor desktop- en mobiele browsers. Bekijk deze samenvatting om een idee te krijgen van welke desktopbrowsers de Geolocation API ondersteunen:
Ondersteuning in mobiele browsers is nog beter, zoals u in deze samenvatting kunt zien:
De Geolocation-API wordt breed ondersteund. U vraagt zich misschien af wat u kunt doen als u een browser tegenkomt die de Geolocation-API niet ondersteunt. Geloof het of niet, er bestaan verschillende polyfills en shims om dat probleem te verhelpen. De meest opvallende oplossingen zijn die van Manuel Bieh en een lichtgewicht schijf gemaakt door Paul Irish.
Nu we de ins en outs van de Geolocation API kennen, is het tijd om het in actie te zien. Deze demo is volledig functioneel en gebruikt alle methoden en objecten die in dit artikel worden beschreven. Het doel is eenvoudig, elke keer dat een verzoek om de positie van het apparaat wordt gedetecteerd, worden de locatiegegevens getoond aan de gebruiker in lijstindeling.
De demo bevat drie knoppen, waarmee u de bewerking kunt selecteren die u wilt uitvoeren. De demo detecteert ook of de browser de Geolocation API ondersteunt of niet. Als dit niet het geval is, wordt het bericht "API niet ondersteund" weergegeven en zijn de knoppen uitgeschakeld.
De broncode van de demo wordt hieronder getoond, maar je kunt ook spelen met een live demo van de Geolocation API.
Geolocation API Demo door Aurelio De Rosa Geolocation API
API niet ondersteundInformatie
- Jouw positie is niet beschikbaarbreedtegraad, niet beschikbaar° lengtegraad (met een nauwkeurigheid van niet beschikbaar meter)
- Je hoogte is niet beschikbaar meter (met een nauwkeurigheid van niet beschikbaar meter)
- je bent niet beschikbaar° vanuit het ware noorden
- Je beweegt met een snelheid van niet beschikbaar° meter / seconde
- Gegevens bijgewerkt op niet beschikbaar
Log
Demo gemaakt door Aurelio De Rosa (@AurelioDeRosa)
In dit artikel hebben we geleerd over de Geolocation-API. We hebben gezien wat het is, hoe het te gebruiken en wanneer het te gebruiken.
De geolocatie-API is een nuttige tool om de gebruikerservaring te verbeteren en kan vele doelen dienen. Ondersteuning is breed, maar vergeet niet dat oudere versies van Internet Explorer dit niet ondersteunen.
Zoals we in dit artikel hebben besproken, moet u zich ervan bewust zijn dat sommige locatiegegevens, zoals snelheid, hoogte, en titel, zijn niet altijd beschikbaar. Vergeet ook niet om de Geolocation API met zorg te gebruiken, omdat deze een aanzienlijke batterijcapaciteit vereist, vooral op mobiele apparaten die zijn uitgerust met een GPS-chip.
