Introductie

Stelt u zich eens een bezoek aan een stad voor de eerste keer. Je honger hebt, maar niet weten waar de dichtstbijzijnde restaurants zijn en welke van hen zijn geen goed. Zou het niet mooi zijn als sommige app kan uw locatie detecteren en bieden u een lijst van restaurants die het dichtst bij u, samen met recensies en klasseringen voor elk?

En dit is niet de enige overweging - zou het nauwkeurig detecteren uw locatie, rekening houdend met uw privacy ook? Dit is waar de W3C Geolocation API komt, ondersteuning voor die is opgenomen in Opera 10,60 .

Wat is Geolocation?

Door Geolocation, bedoelen we het gebruik van scripts in de browser om te bepalen waar een bepaalde gebruiker. Dit heeft tal van voordelen van Web applicaties en is een spannende mogelijkheid voor browsers te hebben. Bijvoorbeeld, kon u het bouwen van een web service aan u te voorzien van informatie over het dichtstbijzijnde ziekenhuis, met turn-by-turn route navigatie info. Of wat dacht je van een app die je vertelt over alle coole meetups er in uw regio in de komende dagen, samen met de exacte locaties? Nog opgewonden? Lees verder!

Het W3C Geolocation API

Mensen hebben geprobeerd om een ​​gebruiker zich bevindt al een tijdje op het web te bepalen. Echter, de meeste van de oudere methoden zijn vrij onnauwkeurig, en zoek niet de gebruiker toestemming om deze informatie te openen. Het W3C Geolocation API wordt bepaald door de W3C op een uniforme manier voor ontwikkelaars om location-aware web-applicaties kunnen maken. Het is veel nauwkeuriger en ingebouwde zodanig dat de gebruiker in staat is om te controleren of zijn locatiegegevens worden onthuld op een bepaalde plaats of niet.

Hoe wordt de locatie bepaald?

In browsers die ondersteuning bieden voor Geolocation, gebruiker locaties worden bepaald op basis van een combinatie van gegevens van gebruikers 'wifi access points en gebruikers IP-adressen.

Hoe zal de bezoekers van uw website goed te keuren of te weigeren delen van hun locatie-informatie?

Figuur 1: Een browser waarschuwt de gebruiker dat een aanvraag is proberen om hun locatiegegevens via de Geolocation API en vragen hun toestemming om toegang te krijgen openen.

Wanneer u een pagina die Geolocation code is inclusief toegang, zal een kleine melding verschijnen bovenaan de pagina de vraag of u wilt uw locatie-informatie te delen met de al dan niet toepassen (zie figuur 1). Als je dat doet, dan wordt de informatie gedeeld worden, je kunt er ook voor kiezen om te kiezen mijn keuze onthouden voor deze website, zodat u in de toekomst niet weer zal worden gevraagd en zal de applicatie automatisch te gaan met de keuze die je gemaakt de eerste keer. Op dezelfde manier kun je voorkomen dat je informatie over de locatie, zodat u als gebruiker van geval tot geval de keuze op het gebied van uw privacy.

Hoe je het gebruikt in een web app?

Met behulp van de geolocatie-API is eenvoudig. Ten eerste, wil je om te bepalen of de gebruiker de browser eigenlijk Geolocatie ondersteunt. U kunt dit doen met JavaScript om de browser opvragen en zien of het ondersteunt de navigator.geolocation eigendom. Voor een one-shot bepalen van de locatie van de gebruiker, dan kunt u gebruik maken van de navigator.geolocation.getCurrentPosition() functie die, indien succesvol, zal noemen naar gelang het succes callback functie die u kiest.

Een goede manier om dit te doen is:

 / / Controleer of de browser ondersteunt W3C Geolocation API
 if (navigator.geolocation) {
     navigator.geolocation.getCurrentPosition (successFunction, errorFunction);
 } Else {
     alert ('Het lijkt wel of Geolocation, die vereist is voor deze pagina, is niet ingeschakeld in uw browser Gebruik aub een browser die het ondersteunt..');
 }

In een productie-systeem, moet u overwegen fallback dus die gebruikers zonder Geolocatie-enabled browser kunnen hun locatie handmatig invoeren door het invoeren van hun postcode of het kiezen van hun positie op een kaart, bijvoorbeeld.

Vervolgens voegt u het succes functie:

 functie successFunction (positie) {
     var lat = position.coords.latitude;
     var lang = position.coords.longitude;
     alert ("Uw breedte is: '+ lat +' en lengtegraad is '+ lang);
 }

U kunt schrijven de fout functie zoals u dat wilt. Raadpleeg de PositionError Interface in de specificatie voor meer informatie over foutcodes. Omwille van het voorbeeld, zullen we het simpel houden voor nu:

 functie errorFunction (positie) {
     alert ('Fout!');
 }

Hier is de resulterende voorbeeld pagina .

Als u wilt blijven kijken van de gebruiker positie en dienovereenkomstig het actualiseren van de functie, kunt u gebruik maken van de navigator.geolocation.watchPosition() functie. Het accepteert dezelfde parameters en werken in min of meer dezelfde wijze als getCurrentPosition() . In beide getCurrentPosisition() en watchPosition() , alleen de eerste parameter noodzakelijk. De tweede parameter, die de fout callback behandelt, is optioneel. Daarnaast dat een derde parameter optioneel - een object met eigenschappen die gedefinieerd:

• grotere nauwkeurigheid
• time-out tussen de bepaling van de locatie en de aanroeping van het succes callback functie.
• Een maximum leeftijd waarvoor de app kan de locatie-informatie in de cache tot de volgende getCurrentPosition() of watchPosition() wordt aangeroepen.

Wat nu?

Met de mogelijkheid om de gebruiker locatie vast te stellen is groot. Echter, met de API krijg je een lengtegraad / breedtegraad-paar. Hoe kom je te weten waar op aarde die breedte / lengte pair komt overeen met? Dat is waar reverse geocoding in het spel komt.

Reverse geocoding is het proces van het vinden van waar het precies een lengtegraad / breedtegraad-paar komt overeen met. Bijvoorbeeld, als we krijgen een lengte / breedte paar (38.898748, -77.037684), kunnen reverse geocoding vertellen ons dat het overeenkomt met het Witte Huis in Washington, DC

Er zijn een paar manieren om de reverse geocoding en alle van hen nodig met behulp van enkele externe dienst of een ander te doen. U kunt gebruik maken GeoNames.org 's API om het te doen, evenals WikiMapia de API of dataset genoemd Nominatim , gerund door vrijwilligers. Google Maps biedt ook een manier om geocode breedte / lengte paren te keren naar concrete adressen om te laten zien op een kaart.

Andere API's waarin breedte / lengte paren gebruikt kunnen worden zijn onder andere de Flickr API , waaronder methoden voor het ophalen van foto's genomen op een bepaalde breedtegraad / breedtegraad-paar , de Meetup.com API , en anderen.

Het vinden van je op een kaart

Laten we snel gaan door middel van een klein voorbeeld dat Google Maps gebruikt om de kaart wordt weergegeven van de plaats waar de gebruiker zich momenteel bevindt. We zullen eerst het script naar Google Maps te laden op de pagina:

 <script src="http://maps.google.com/maps/api/js?sensor=false"> </ script>

Dan nemen we onze logica om de locatie te bepalen en weer te geven een kaart gecentreerd op die locatie:

 <script type="text/javascript">
 / / Bepaal ondersteuning voor Geolocation
 if (navigator.geolocation) {
     / / Zoek positie
     navigator.geolocation.getCurrentPosition (displayPosition, errorFunction);
 } Else {
     alert ('Het lijkt wel of Geolocation, die vereist is voor deze pagina, is niet ingeschakeld in uw browser Gebruik aub een browser die het ondersteunt..');
 }

 / / Succes callback functie
 functie displayPosition (pos) {
     var mylat = pos.coords.latitude;
     var mylong = pos.coords.longitude;
     var thediv = document.getElementById ('locationinfo');
     thediv.innerHTML = '<p> Uw lengte is:' +
         mylong + 'en je latitide is' + mylat + '</ p>';

 / / Load Google Map
 var latlng = new google.maps.LatLng (mylat, mylong);
     var myOptions = {
       zoom: 15,
       centrum: latlng,
       mapTypeId: google.maps.MapTypeId.HYBRID
     };

 var map = new google.maps.Map (document.getElementById ("map_canvas"), myOptions);

 / / Voeg marker
 var marker = new google.maps.Marker ({
	      positie: latlng,
	      kaart: kaart,
	      titel: "U bevindt zich hier"
	  });
 }

 / / Error callback functie
 functie errorFunction (pos) {
     alert ('Fout!');
 }
 </ Script>

Ten slotte HTML en CSS de gegevens weergegeven als volgt:

 <head>
     <style type="text/css">
         html, body {
         width: 100%;
         height: 100%;
     }
     # Map_canvas {
         height: 85%;
         width: 100%;
     }
     </ Style>
 </ Head>
 <body>
     <div id="map_canvas"> </ div>
     <div id="locationinfo"> </ div>
 </ Body>

Figuur 2 toont het resulterende Geolocation voorbeeld . Het zal u vragen om toestemming om uw locatie te delen en vervolgens een Google Map van uw locatie.

Figuur 2: Screenshot van de pagina, die uw coördinaten en een kaart gecentreerd op die coördinaten laat zien.

In het bovenstaande screenshot, ziet u een klein pictogram dat geolocatie aan de rechterkant van de adresbalk. Dit icoon zal op elke pagina waar geolocatie wordt gebruikt. Als je ontkent geolocatie privileges op een pagina die daarom verzoekt, dan is dit pictogram verschijnt niet op de adresbalk van dat tabblad. Klik op het pictogram om verdere instellingen met betrekking tot geolocatie, zoals het ontkennen van een pagina toegang tot uw locatie.

Conclusie

Het W3C Geolocation API biedt een spannende en handige manier voor webontwikkelaars om hun applicaties gebruik te maken van de locatie van de gebruiker te maken. De mogelijkheid om het te doen is nauwkeuriger dan nu verleden methoden en biedt een grotere mate van privacy voor de gebruikers dan ooit tevoren. Nu is het aan de ontwikkelaars om ervoor te spannende toepassingen die voortbouwen op deze mogelijkheid.

Demo's

• Het eerste voorbeeld in het artikel laat zien hoe je de functies gebruiken om een lengtegraad / breedtegraad paar te krijgen .
• Het tweede voorbeeld in het artikel bepaalt je locatie en maakt gebruik van een Google Map om te laten zien uw stad .
• Vadim Makeev heeft een eenvoudig voorbeeld dat zoomt in en je exacte locatie wordt weergegeven met behulp van de geolocatie-API, Google Maps API v3, en Simple JS (nauwkeurigheid zoals altijd zal afhangen van de hoeveelheid geo gegevens beschikbaar zijn in uw regio).
• Een meer gecompliceerde Geolocation demo , die erachter komt dat de naam van uw locatie, toont een kaart van het, somt de tweets onder vermelding van uw locatie en ook alle meetups er in de komende dagen rond die locatie. Maakt gebruik van gegevens uit GeoNames.org , Google Maps , Twitter en Meetup.com .
• Een Geolocation demo in het Russisch , ook door Vadim Makeev , maakt gebruik van Yandex Maps en Twitter en werkt op een soortgelijke manier naar het vorige voorbeeld.