HTML5: Hvordan implementere Geolocation API

Geolocation API, eller Web-GL som det noen ganger blir referert til, er en W3C-kandidatanbefaling for en metode for å informere et nettsted om brukerens geografiske beliggenhet tilknyttet vertsenheten, og refererer først og fremst til breddegrad og lengdegradsposisjon. Vanlige kilder til stedsinformasjon inkluderer:

  • Global Positioning System (GPS)
  • lokasjoner utledet fra nettverkssignaler som en IP-adresse, RFID, Wi-Fi og Bluetooth MAC-adresser
  • GSM / CDMA-celle-ID-er
  • brukerinnspill

Det er imidlertid ingen garanti for at API vil returnere enhetens faktiske plassering; det er en margin for feil, og i noen tilfeller vil den generelle plasseringen bli oppdaget. APIen er designet for å muliggjøre både "one-shot" posisjonsforespørsler og gjentatte posisjonsoppdateringer, samt muligheten til eksplisitt å spørre alle hurtigbufrede posisjoner. Med geolocation-aktiverte websider kan du sette en verden av muligheter til brukernes fingertupp. Tenk for eksempel på et nettapplikasjon som lokaliserer restauranter innenfor en radius av 5 kilometer fra brukerens enhetsplassering, en funksjon som er ganske lik mange GPS-enheter i dag.

Denne funksjonen kan implementeres ved å bruke Googles IP-GeoCoding-tjeneste som en fallback-mekanisme med geolocation-shim, som er tilgjengelig på Github. Selv om Googles geografiske JavaScript ikke fungerer som et tilbakeblikk, gir det måter å koble seg til BlackBerry, WebOS og Google Gears-spesifikke API-er for mobile applikasjoner. I dette stykket vil jeg demonstrere ved hjelp av et enkelt stedsskript basert på W3C Geolocation API.

For øyeblikket støttes W3C geolocation API i følgende nettlesere med tilbakestillingsstøtte som referert til under "Når jeg kan bruke Geolocation": IE 9.0+, Firefox 3.5+, Chrome 5.0+, Safari 5.0+, Opera 10.6+, iOS Safari 3.2+, Opera Mobile 11.0+, og Android / Browser 2.1 + / 3.0 +. En fersk undersøkelse av global brukerstatistikk viser en støttesats på 68, 21% basert på StatCounter fra januar 2012 fra Global Stats.

scripts

Spesifikasjonen definerer tre metoder der posisjonsinformasjonen kan hentes ved hjelp av JavaScript-objektsamtaler med navigator.geolocation : enkeltskuddets posisjonsforespørsel, den gjentatte posisjonsforespørselen når den nåværende posisjonen endres og be om eller oppdatere hurtigbufrede posisjoner.

Forespørsel om kodeeksempel på enkelt skudd:

 funksjon showMap (posisjon) { 
 // Vis et kart sentrert på (position.coords.latitude, position.coords.longitude). 
 } 
 // Posisjon forespørsel. 
 navigator.geolocation.getCurrentPosition (showMap); 

Gjentatte posisjoner ber om kodeeksempel:

 funksjonsrullekart (posisjon) { 
 // Ruller kartet slik at det er sentrert på (position.coords.latitude, position.coords.longitude). 
 } 
 // Be om gjentatte oppdateringer. 
 var watchId = navigator.geolocation.watchPosition (scrollMap); 
 funksjonsknappClickHandler () { 
 // Avbryt oppdateringene når brukeren klikker på en knapp. 
 navigator.geolocation.clearWatch (watchId); 
 } 

Gjentatte posisjonsoppdateringer og feilhåndtering av eksempelkodestykket:

 funksjonsrullekart (posisjon) { 
 // Ruller kartet slik at det er sentrert på (position.coords.latitude, position.coords.longitude). 
 } 
 funksjonshåndteringError (feil) { 
 // Oppdater et div-element med error.message. 
 } 
 // Be om gjentatte oppdateringer. 
 var watchId = navigator.geolocation.watchPosition (scrollMap, handleError); 
 funksjonsknappClickHandler () { 
 // Avbryt oppdateringene når brukeren klikker på en knapp. 
 navigator.geolocation.clearWatch (watchId); 
 } 

Potensielt bufrede posisjon ber om kodeutdrag:

 // Be om stilling. Vi godtar stillinger hvis alder ikke er 
 // større enn 10 minutter. Hvis brukeragenten ikke har et 
 // frisk nok hurtigbufret posisjonsobjekt, vil det automatisk 
 // skaffe seg en ny. 
 navigator.geolocation.getCurrentPosition (successCallback, 
 errorCallback, 
 {MaximumAge: 600000}); 
 function successCallback (posisjon) { 
 // Ved å bruke alternativet 'maximumAge' ovenfor, posisjonen 
 // objektet er garantert å være høyst 10 minutter gammelt. 
 } 
 funksjonsfeil Tilbakekall (feil) { 
 // Oppdater et div-element med error.message. 
 } 

Sikkerhet

Geolocation API gir også et nivå av hensyn til brukersikkerhet og personvern siden informasjonen i de fleste tilfeller viser plasseringen til brukeren av enheten. Implementeringer som samsvarer med spesifikasjonen, må gi en metode som beskytter brukerens personvern, og denne prosedyren skal sikre at ingen posisjonsinformasjon blir gjort tilgjengelig via API uten brukerens uttrykkelige tillatelse .

Hver gang du får tilgang til en webside som inkluderer API for geolocation, vises en liten varsling øverst på siden med spørsmål om du vil dele posisjonsinformasjonen din med applikasjonen eller ikke. Åpning til Dev Opera Geolocation API, resulterer i displayet i figur B i Google Chrome 16. Nettlesere som støtter Geolocation har sin egen sikkerhetsvarsel, som tillater brukeren å tillate eller nekte nettleseren enhver tilgang til enhetens plassering.

Kodeeksempel

JavaScript for å oppnå de grunnleggende koordinatposisjonene er plassert i websiden dokumentet:

 // Sjekk om nettleseren støtter W3C Geolocation API 
 if (navigator.geolocation) { 
 navigator.geolocation.getCurrentPosition (successFunction, errorFunction); 
 } annet { 
 varsel ('Det ser ut til at Geolocation, som er nødvendig for denne websiden applikasjonen, ikke er aktivert i nettleseren din. Bruk en nettleser som støtter Geolocation API.'); 
 } 
 funksjon suksessFunksjon (stilling) { 
 var lat = position.coords.latitude; 
 var lang = posisjon.coords.longitude; 
 alarm ('Plasseringskoordinatene dine er: Bredde:' + lat + 'Lengdegrad:' + lang); 
 } 
 funksjonsfeilFunksjon (posisjon) { 
 alert ( 'Feil!'); 
 } 
 Skriptet over ble brukt på en eksempelwebside, og deretter vist i Firefox 8.0.1; legg merke til at sikkerhetsvarslingen for Geolocation i figur C er litt annerledes enn i forrige Google Chrome-eksempel ovenfor. 

Sikkerhetsvarslingen i Firefox, som demonstrert i dette eksemplet, lar brukeren velge fra rullegardinmenyen "Del beliggenhet", og valgene inkluderer Alltid del, del aldri eller ikke nå. Når brukeren godkjenner Geolocation-skriptet for å kjøre i nettleseren, vises de resulterende koordinatene som vist i eksemplet i figur D :

Videre lesning

Hvis du ønsker å lære mer om hvordan du bruker Geolocation API og andre online kartleggingsverktøy som Google Maps, vises flere ressurser her:

  • HTML5 vær så snill
  • Når kan jeg bruke Geo Location
  • Github Geo Location Shim Fallback
  • Google Code Geo Location JavaScript
  • W3C spesifikasjon
  • Dev Opera-artikkel
  • Dev Opera Geolocation Eksempel

Et fremtidig innlegg vil gjennomgå og demonstrere Google Maps API-skriptet med websidedokumenter, som lager kart for å vise brukerens enhetsplassering, inkludert flere alternativer som hardkoding av zoomnivået, spesifisering av karttypen og aktivering av Geo Coding.

© Copyright 2020 | mobilegn.com