Geolokáció
Update1: Az első példánál, normális, ha üres képernyőt kapsz, azt jelenti, minden rendben. A második példánál, adjatok időt az oldalnak, működik, csak lassan. Még nem jöttem rá mi okozza a lassulást. A harmadik példa a google maps-től függően gyors vagy lassú.
Mi is az a Geolokáció? Nos, a HTML5 hozománya, a GeoLocation modul segítségével visszakaphatjuk a weboldalt megjelenítő eszköz (számítógép, tablet, mobil, stb.) földrajzi pozícióját. Ezt továbbküldhetjük akár a Google Maps-re. A dolog szépséghibája csupán annyi, hogy nincs meghatározva, hogy mivel határozzuk meg ezt a helyzetet. Az eszközbe épített GPS-el, cellainformációk alapján, IP cím alapján, stb. Amennyiben, a technikai specifikáció a végleges változatban kicsit konkrétabban meghatározza ezt, akkor valóban nagyon hasznos és gyors elterjedésű eszközt kapunk készhez. Addig is érdemes vele, mint érdekességgel foglalkozni. Sajnos egyenlőre tapasztalataim alapján ha nincs GPS modul az eszközben, akkor nagyjából 35-50km pontossággal tudja a helyzetünket meghatározni, de tapasztaltam 200km-es eltéréseket is. Akkor kezdjünk is bele.
A böngésző ellenőrzése
Nézzük meg elsőnek, hogy hogyan tudjuk ellenőrizni, hogy böngészőnk támogatja-e ezt az új eszközt. Az alábbi kód semmi mást nem csinál, mint lekérdezi, hogy a böngészőnk képes-e a geolokációra, amennyiben nem, akkor azt egy hibajelzéssel tudatja velünk, ha képes rá akkor egy üres képernyőt kapunk.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Geolokáció</title>
</head>
<body>
<script type="text/javascript">
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
alert('Nem támogatja a böngésződ a geolokációt');
}
</script>
</body>
</html>
Navigator.Geolocation objektum
Az objektumunknak 3 metódusa van, amit használhatunk:
- getCurrentPosition() – az aktuális pozíciónkat határozhatjuk meg vele
- watchPosition() – Monitoring üzemmódba kapcsolja a függvényt, folyamatosan kéri le a koordinátáinkat
- clearWatch() – Monitoring üzemmód kikapcsolása
Egyszerű használati példa:
...
function getLocation(){
var geolocation = navigator.geolocation;
geolocation.getCurrentPosition(showLocation, errorHandler);
}
Function showLocation(position){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
}
...
A kódban egy picit előre szaladtunk, mert már a pozíció (position) is szerepel benne.
Tartózkodási hely tulajdonságai
A fenti példában ez a position-ba kerül bele. Nézzük miket kérdezhetünk le.
- timestamp – időbélyeg, visszaadja a dátumot és helyet
- coords.latitude – A helyzetünk szélességi foka
- cooords.longitude – A helyzetünk hosszúsági foka
- coords.accuracy – Méteres pontosságú helyzetünket adja vissza
- coords.altitude – Az objektum visszatérési értéke a pozíciónk magassága
- coords.altitudeAccuracy – Az előző objektum pontosságát kapjuk
- coords.speed – A sebességet adja meg az előző pozícióhoz képest
A következő példával már meghatározzuk a vélhető tartózkodási helyünk koordinátáit. Egy if-el vizsgáljuk a helymeghatározás támogatottságát, amennyiben ez rendben van, akkor a success függvényben eltároljuk a lekérdezett koordinátákat. Bármi hiba esetén az error függvényt hívjuk meg. Majd a végén az alert segítségével kiíratjuk a helyzetünk koordinátáit vagy a hiba tényét.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Geolokáció</title>
</head>
<body>
<script type="text/javascript">
function success(position) {
alert(position.coords.latitude+":"+ position.coords.longitude);
}
function error(msg) {
alert("Hiba!!! "+msg);
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
alert('Nem támogatja a böngésződ a geolokációt');
}
</script>
</body>
</html>
A következő példánkban még egy picit bővítjük a scriptünket és felcsalogatjuk ezeket a koordinátákat a Google Maps-re. Lássuk is.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Geolokáció</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="mapcanvas" style="height: 400px; width:560px;"></div>
<script>
// Google map
var myOptions = {
zoom: 15,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
// --
function success(position) {
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(latlng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"Megvagy!"
});
}
function error(msg) {
alert("Hiba!!! "+msg);
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
alert("Nincs geolokációs támogatás");
}
</script>
</body>
</html>
Geolokáció a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.
Permissions beyond the scope of this license may be available at http://html5.ugyesen.com.
