Přeskočit na obsah

Hledej:


elfineer | blog

@PavelHoralik @ischiam tomu obyčejně hráblo, ne? :)
twitter.com/elfineer


srp 10 14

Automatický výběr města podle skutečné polohy

Datum a čas sobota 14. srpna 2010, 12:59
Tagy geolokace html5 jquery webdesign weby
Komentáře 2 (přejít na komentáře, přidat nový, sledovat pomocí RSS)
Přečteno 10125×
Popis Jak do formuláře přidat tlačítko "Zjisti město podle polohy".
Úvod

Pro prohlížeče, které zvládnou určení polohy (u nových verzí Chrome, Safari, Firefoxu i Opery bez problému) můžete přidat tlačítko, které samo vybere město, ve kterém se uživatel nachází (nebo nejbližší) – například pro registrace do e-shopů či přímo objednávky.

Geolokace v prohlížeči

Pro náhled, jak tato funkce vypadá a jak vypadají potvrzení, které chtějí prohlížeče po uživateli, se podívejte na video:

Jak to funguje?

Novější prohlížeče umí odpovědět místem, kde se uživatel nachází – zeměpisnou šířkou a délkou (a dalšími údaji jako ja přesnost, ty ale v tomto příkladu nebudu používat). Tyto údaje pochází od Googlu a mohou být různě přesné – někdy vycházejí jen IP adresy (takže třeba i mobilní sítě jako GPRS/UMTS/CDMA se můžou hlásit jako Praha), někdy mohou pocházet ze StreetView a například mě přes wifi (byť s CDMA připojením na routeru) určuje s přesností na metry, nejspíš díky mobilu s Google Maps (potkala se GPSka+Wifi).

Velmi podrobný článek na toto téma naleznete na blogu Martina Hassmana: Jak funguje geolokace… Podrobný popis využití geolokace v JavaScriptu je v článku na Zdrojáku

Tady nám dál stačí, že existuje funkce, která řekne, zda prohlížeč geolokaci umí (navigator.geolocation), a funkce, která vrátí zeměpisnou šířku a délku (navigator.geolocation.getCurrentPosition). Tato funkce vrací údaje jako desetinná čísla (a ne minuty, vteřiny).

Na konci článku není nějaké jednoduché řešení, jak udělat Ctrl+C/V do svého webu, je zde popis, jak jsem tuto funkci řešil já. Pokud se rozhodnete použít podobné řešení, klidně vybírejte z kódu :).

Tlačíko

Tlačítko „Zjistit mou polohu automaticky“ má nastaveno výchozí nezobrazení se (display: none) a jQuery ho ukáže v tom případě, že prohlížeč zvládne určení polohy.

Geolokace v prohlížeči
Geolokace v prohlížeči
Geolokace v prohlížeči
Geolokace v prohlížeči

Souřadnice

Nejprve doporučuji jednoduchý test, že dokážete souřadnice v pořádku zjistit – po stisknutí tlačítka vyskočí alert s šířkou a délkou.

Geolokace v prohlížeči

Pokud se dobrá věc podařila, máte dvě možnosti – jedna, že původní select na výběr města např. schováte a uložíte si město sám (AJAXem třeba pošlete na pozadí souřadnice). Druhou možností je, že uživateli jen poradíte (vyberete správné město v selectu a tím skončíte). Jako lepší možnost mi přijde jen poradit, protože šance, že bude město určeno špatně, je poměrně velká (mobilní sitě...). Ještě předtím ale musíme zjistit nejbližší město podle souřadnic a to tak, že souřadnice se předají AJAXem nějaké „ministránce“.

Souřadnice na město

Já mám v databázi tabulku 50 největších měst a k nim souřadnice. Seznam měst (s údajem o počtu obyvatel, podle kterého jsem vybíral těch 50) pochází z webu Ministerstva vnitra, souřadnice jsem dopisoval ručně podle nějakého webu, pokud byste ale potřebovali víc měst, tak to chce geocoding (převod adres na souřadnice). Mou tabulku (stačí-li vám zmiňovaných 50 největších) si můžete stáhnout jako CSV zde.

Geolokace v prohlížeči

Ministránka pak dostane v URL souřadnice bodu a jejím úkolem je vrátit jméno nejbližšího města (nebo ještě lépe nějaké ID, ale já používám jméno). Tedy spočítat vzdálenosti ke všem městům, co známe a vybrat nejnižší.

Nesmíme zapomenout na to, že tyto souřadnice jsou úhly a nejsou nějak pěkně odpočítané (šachovnice), takže použít odmocninu a Pythagorovu větu by bylo špatně. Udělal jsem to, na první pohled to fungovalo, ale bylo to špatně, protože (velmi laicky řečeno) jeden úhel šířky není porovnatelný s jedním úhlem délky (výpočet přes odmocninu - PV - by s tímto počítal).

Proto je nutné použít mnohem chytřejší výpočet, který už naštěstí také vykoumal někdo dřív, viz tato prezentace, sl. 7. Pokud chcete čísla jen porovnávat, je to fuk, kdybyste chtěli tuto vzdálenost použít přímo z databáze, nezapomeňte změnit první konstantu na 6378 (poloměr Země v km a nikoliv mílích).

Geolokace v prohlížeči

Označení města

Po tom, co ministránka vrátí jméno města, jQuery ho vybere jako aktivní a tím končí práce tohoto skriptu.

Ukázka

Na adrese http://blog.el­fineer.cz/files/ge­olokace/ si můžete výběr města vyzkoušet. Pro kontrolu navíc ukáže mapu, kam vás prohlížeč umístil a navíc vypíše všechna známá města s vzdálenostmi k nim. Vzdálenost je počítána pro kontrolu pomocí tohoto PHP skriptu (ne sloupec "vzdalenost" z databáze). Mimochodem dík všem dobrým lidem na Twitteru, kteří tento web vyzkoušeli, když jsem na něj dal odkaz.

Závěr

Uznávám, že v tomto případě je to docela dost práce na to, že uživatel může ušetřit pár vteřin při jednorázové registraci (nehledá své město či nepřemýšlí, jestli nenajde větší dřív). Také může dost času ztratit tím, že musí potvrdit povolení k určení polohy, že se prohlížeč zamyslí nebo ho pošle úplně jinam.

Myslím ale, že to je docela pěkné využití takovéto funkce na počítači (a ne jen na mobilu ve web aplikaci). Navíc uživatelů, jejichž prohlížeč nic takového neumí, se nijak nedotkne. Kromě vybrání měst by šla pěkně využít třeba na webu banky / mobilního operátora (nejbližší pobočka, bakomat / prodejna - nepočítala by se vzdálenost k městům, ale k těmto bodům) a podobných firem. Tam by to ale chtělo započítat i přesnost.

neděle 14. srpna 2010, 12:59 - 10125× shlédnuto - RSS komentářů - tagy: geolokace html5 jquery webdesign weby



?>


Nepřehlédněte

carnero - sobota 14. srpna 2010, 13:10 - web - #

Super „osvěta“. Doufám, že se geolokace rozšíří protože v ní vidím budoucnost. Jak píšeš, nejen mobilní. Osobně bych to třeba ocenil u e-shopů s více odběrnými místy.

blizzboz - neděle 15. srpna 2010, 06:43 - #

vďaka za článok aj keď pochybujem o tom že by táto metóda fungovala nejako extra spoľahlivo. pridávam si ťa do RSS

Komentáře používají Texy! syntaxi.

"odkaz":http://kam.vede.cz, *zdůrazněné (em)*, **zdůrazněnější (strong)**, citace


Hledání

Mikroblog

GOTO TWITTER
GOTO POSTEROUS

Reklama

Nejčtenější

Reklama

Kvalitní domény, levný webhosting
Vyzkoušejte spolehlivý Český hosting. www.cesky-hosting.cz

Facebook tipy

Moje weby

Napište mi vzkaz