In de YUI 3 Gallery: Geo

06 mei 2011 om 16:46 door Nicholas C. Zakas | In Ontwikkeling , YUI 3 Galerij | Comments Off

Geolocatie is een van de meer spannende HTML5-gerelateerde technologieën te verschijnen in browsers, en de Geo Gallery module geeft u toegang tot informatie over de locatie. De W3C Geolocation API biedt een eenvoudige interface naar de gebruiker zich bevindt vanuit JavaScript toegang te krijgen. De volgende code geeft toegang tot de gebruiker de huidige locatie in een ondersteunende browser:

navigator.geolocation.getCurrentPosition(function(result) { //success handler }, function (result){ //failure handler }) 

Wanneer deze code wordt uitgevoerd, wordt de browser verschijnt er een bericht met de vraag om toestemming van de gebruiker om hun huidige locatie te onthullen. Het dialoogvenster weergegeven in Firefox ziet er als volgt uit:

Geolocatie dialoogvenster in Firefox

Als de gebruiker ontkent toestemming, of er een fout optreedt terwijl het proberen om de huidige positie te krijgen, is het niet handler genoemd. Anders wordt het succes handler aangeroepen met informatie over de huidige locatie. Die informatie komt in de vorm van lengte-en breedtegraad coördinaten (andere informatie beschikbaar zijn en, afhankelijk van de uitvoering).

Het W3C Geolocation API wordt ondersteund in Internet Explorer 9 +, Firefox 3.5 +, Safari 5 +, Chrome en Opera 10.6 en op Mobile Safari en Webkit op Android, waardoor het redelijk alomtegenwoordig.

De Geo-module maakt gebruik van de geolocatie-API wanneer het beschikbaar is, en valt terug naar een IP-gebaseerde lookup via de YQL pidgets.geoip open tafel wanneer ze niet beschikbaar is of als er een fout optreedt. Deze tabel is bijzonder handig, want je kunt informatie over de locatie opzoeken voor een specifiek IP-adres, of u kunt het IP-adres weg te laten en het zal de locatie-informatie terug te komen voor het IP-adres die het verzoek. Het laatste gedeelte zorgt ervoor dat je nodig hebt om slechts een verzoek aan locatie-informatie in plaats van twee (andere oplossingen gebruik maken van een om het IP adres te krijgen en dan de ene naar de locatie-informatie voor dat IP-adres te krijgen) te krijgen.

In typische YUI mode, de Geo-module biedt een gestroomlijnde interface voor toegang tot geolocatie-informatie. In plaats van twee callback functies, een voor het succes en een voor het niet, net voorbij in een. Het resultaat object heeft een success eigenschap die aangeeft of het gesprek geslaagd:

 YUI({ gallery: 'gallery-2011.04.27-17-14' }).use('gallery-geo', function(Y) { Y.Geo.getCurrentLocation(function(response){ //check to see if it was successful if (response.success){ console.log(response.coords.latitude); console.log(response.coords.longitude); } }); }); 

Wanneer een geolocatie oproep voltooid, wordt het success onroerend goed waar is en response.coords is gevuld met ten minste twee eigenschappen: latitude en longitude (als de native API wordt gebruikt, dan worden alle beschikbare eigenschappen worden gekopieerd naar dit object). Er is ook een source woning op de reactie object dat is ofwel "native", als de informatie wordt opgehaald uit de native API, of "pidgets.geoip", indien zij is opgehaald door YQL. Als er een fout optreedt, of als de gebruiker af te verstrekken informatie over de locatie, dan is success is vals.

Als de geolocatie-API heeft een fout, zal de Geo-module in plaats daarvan proberen IP-lookup. Indien de gebruiker echter af te geven informatie, het IP-lookup niet uitgevoerd.

Houd in gedachten dat de native API is veel nauwkeuriger dan IP-locatie, dus je krijgt niet dezelfde kwaliteit resulteert in browsers zonder eigen geolocatie ondersteuning. Echter, de Geo-module is een goede eerste stap om op de locatie gebaseerde ervaringen aan uw gebruikers.

Delen en uit te breiden: Bookmark met del.icio.us | Digg it! | reddit!

Nog geen reacties

Sorry, het reactieformulier op dit moment gesloten.

Hosted by Yahoo!

Copyright © 2006-2012 Yahoo! Inc Alle rechten voorbehouden. Privacy Policy - Gebruiksvoorwaarden

Powered by WordPress op Yahoo! Web Hosting .