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 3 (přejít na komentáře, přidat nový, sledovat pomocí RSS)
Přečteno 12764×
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 - 12764× 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

kakakaoo - pondělí 23. července, 05:06 - #

jordan shoes tory burch outlet tiffany and co colorado rockies jerseys uggs outlet adidas yeezy canada goose outlet ralph lauren outlet air max 2019 coach factorty outlet nike basketball shoes fitflops ralph lauren uk ray ban sunglasses canada goose adidas nmd kobe shoes yeezy 350 boost nike dunks pandora jewelry adidas campus cheap nba jerseys canada goose outlet yeezy boost oakley sunglasses outlet polo ralph lauren outlet online michael kors outlet online seattle mariners jerseys ralph lauren outlet supreme new york moncler jackets los angeles angels jerseys coach factory outlet birkenstock sandals ugg outlet coach outlet birkenstock sandals baltimore orioles jerseys fitflops sale clearance canadian goose birkenstock outlet nike air presto toronto blue jays jerseys jordans mont blanc pens puma shoes air max 97 nike huarache ecco shoes nike outlet louboutin shoes discount oakley sunglasses pandora kate spade handbags hermes birkin tampa bay devil rays jerseys air jordan shoes minnesota twins jerseys air max 2018 ecco shoes for men polo ralph lauren outlet uggs new york mets jerseys coach outlet christian louboutin outlet pandora charms sale clearance texas rangers jersey kobe bryant shoes michael kors outlet nike epic react flyknit ray ban sunglasses ralph lauren sale clearance fake rolex kate spade outlet nmd adidas pandora jewelry official site tory burch outlet salvatore ferragamo shoes nike zoom new balance outlet jimmy choo outlet adidas shoes prada outlet uggs outlet oakley sunglasses adidas outlet pandora charms kate spade handbag mulberry handbags hermes handbags kate spade handbags adidas superstar salvatore ferragamo valentino shoes outlet coach factory outlet nike shoes for men adidas nmd 180723yueqin

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