HTML5中地理位置定位技術(shù)的應(yīng)用與探究

朱國(guó)藝++周玉珍

摘 要隨著移動(dòng)終端設(shè)備的飛速發(fā)展，App應(yīng)用開發(fā)中地理位置定位（Geolocation）成為了當(dāng)前互聯(lián)網(wǎng)最為熱門的技術(shù)之一，它可以獲得用戶當(dāng)前的位置信息，結(jié)合谷歌或百度地圖的開放接口，能夠?yàn)榭蛻籼峁┤娴囊苿?dòng)信息服務(wù)。通過分析HTML5地理定位技術(shù)的工作原理，它主要使用Geolocation API對(duì)象來(lái)獲取具體位置的經(jīng)緯度信息，通過在線地圖的接口地址轉(zhuǎn)換，可實(shí)現(xiàn)位置定位技術(shù)的商業(yè)化應(yīng)用。

【關(guān)鍵詞】HTML5 位置定位 移動(dòng)終端 地圖服務(wù)

1 服務(wù)應(yīng)用

地理位置定位技術(shù)用以獲得用戶當(dāng)前具體的位置信息，通過與地圖數(shù)據(jù)的綜合比對(duì)，可以針對(duì)性地推出友好的貼心服務(wù)。相當(dāng)于移動(dòng)設(shè)備具有了一定的人工智能，讓用戶在需要某種服務(wù)時(shí)，附近對(duì)應(yīng)的服務(wù)信息會(huì)自動(dòng)呈現(xiàn)出來(lái)，供用戶選擇。例如你在查找附近的餐廳，只需在地圖軟件或網(wǎng)頁(yè)中輸入“餐廳”關(guān)鍵字，搜索結(jié)果頁(yè)面會(huì)列出你附近所有店鋪名、距離、口碑等信息供參考。此種貼心服務(wù)常常讓用戶覺得技術(shù)的情感功能所帶來(lái)的溫馨，甚至?xí)a(chǎn)生一定程度的軟件依賴性，如天氣預(yù)報(bào)功能，無(wú)論你到哪個(gè)城市，都會(huì)即時(shí)顯示當(dāng)?shù)爻鞘械男畔?、溫度、濕度、空氣質(zhì)量等指數(shù)，讓你了解到該城市的基本天氣情況；同樣在移動(dòng)互聯(lián)網(wǎng)站點(diǎn)的應(yīng)用也十分廣泛，如一些新聞網(wǎng)站經(jīng)常推送你所在地區(qū)的信息內(nèi)容，提高用戶的瀏覽和點(diǎn)擊量；房產(chǎn)網(wǎng)中的城市定位功能非常智能，當(dāng)用戶登錄至該網(wǎng)站時(shí)，頁(yè)面會(huì)自動(dòng)切換到訪客所在的區(qū)域并推送相應(yīng)地段的房產(chǎn)信息，從而提供更精確的本地宣傳和銷售服務(wù)。除了在新聞內(nèi)容的應(yīng)用之外，在社交媒體應(yīng)用中位置定位功能也發(fā)揮了較大作用，如微信中的查找附近的人功能，能夠把各個(gè)終端登錄位置信息進(jìn)行統(tǒng)計(jì)計(jì)算，最后排列出附近的人名單。

2 工作原理

在訪問位置信息前，瀏覽器都會(huì)詢問用戶是否共享其位置信息，它必須在用戶的允許下才能進(jìn)行，以谷歌瀏覽器為例，當(dāng)訪問具有地理定位的網(wǎng)站時(shí)，它會(huì)彈出一個(gè)對(duì)話框，詢問你是否允許網(wǎng)站獲取你的位置信息。雖然每次都要點(diǎn)擊一次，但也不要覺得繁瑣，因?yàn)檫@是給用戶提供一道安全門，只有你同意開門，私人信息才會(huì)共享出去。如果你允許瀏覽器與網(wǎng)站共享您的位置，瀏覽器會(huì)向 Google 位置服務(wù)發(fā)送本地網(wǎng)絡(luò)信息，計(jì)算出您所在的位置。

由于網(wǎng)絡(luò)訪問方式的不同，確定位置信息也有多種方法。如通過獲取電腦IP地址去獲取具體位置，但此種方法有局限性，因?yàn)镮P地址受網(wǎng)絡(luò)服務(wù)商的管理和分配，或者在有用戶使用代理等方式上網(wǎng)的情況下，可能會(huì)造成數(shù)據(jù)不準(zhǔn)確。另一種運(yùn)用智能手機(jī)上網(wǎng)，是通過獲取客戶的手機(jī)信號(hào)接收塔，或者是設(shè)備中的GPS來(lái)定位并獲取具體信息，基本可以得到相對(duì)精確的位置信息。這個(gè)位置信息一般是指獲取當(dāng)前位置的經(jīng)度和緯度，再通過強(qiáng)大的在線地圖服務(wù)把這個(gè)經(jīng)緯度信息轉(zhuǎn)換成具體的地址。這個(gè)地址信息可以供網(wǎng)絡(luò)應(yīng)用程序調(diào)用，從而推送一些本地或附近的內(nèi)容信息。

3 技術(shù)實(shí)現(xiàn)

3.1 瀏覽器支持檢測(cè)

支持HTML5技術(shù)的瀏覽器中都可以獲取到定位信息，一般Internet Explorer 9以上、Firefox、Chrome等都支持這一技術(shù)，而這些瀏覽器中通過內(nèi)置Geolocation API可以查詢到位置信息，并供程序調(diào)用。當(dāng)然，也不排除還有人在使用更低版本的瀏覽器，這時(shí)就無(wú)法應(yīng)用到這項(xiàng)新技術(shù)，所以還是有必要在使用之前先檢測(cè)所用的瀏覽器的兼容性情況。實(shí)現(xiàn)方式的代碼是：if （navigator.geolocation）{

//你的瀏覽器支持位置定位

}else{

alert（"瀏覽器不支持地理定位。"）；

}

這是一個(gè)簡(jiǎn)單的選擇語(yǔ)句，如果支持位置定位功能的瀏覽器，可進(jìn)行下一步的獲取信息編程。

3.2 獲取經(jīng)緯度

獲取具體的經(jīng)緯度信息可以使用geolocation對(duì)象的getCurrentPosition方法，如在上面的檢測(cè)程序段中添加如下代碼：

if （navigator.geolocation）{

navigator.geolocation.getCurrentPosition（showPosition）；

}else{

alert（"瀏覽器不支持地理定位。"）；

}

這樣通過getCurrentPosition方法就獲取到了當(dāng)前具體的地理位置信息，最后通過showPosition回調(diào)函數(shù)，輸出相應(yīng)的信息到顯示器。showPosition函數(shù)代碼如下：

function showPosition（position）{

var lat = position.coords.latitude； //緯度

var lag = position.coords.longitude； //經(jīng)度

alert（'緯度：'+lat+'，經(jīng)度：'+lag）；

}

其中，Latitude代表緯度，longitude代表經(jīng)度，當(dāng)獲取成功之后會(huì)返回一個(gè)position對(duì)象，這個(gè)對(duì)象的coords屬性即是坐標(biāo)屬性，返回了經(jīng)、緯度的坐標(biāo)數(shù)據(jù)。

3.3 地圖地址轉(zhuǎn)換

獲取了相應(yīng)的經(jīng)緯度信息之后，它是一個(gè)數(shù)字形式展現(xiàn)，如經(jīng)度：121.542121，緯度：29.254514，這樣還不能具體到所在國(guó)家及省份、城市等詳細(xì)信息，也就不能更好地運(yùn)用網(wǎng)站的本地服務(wù)。解決的方法是運(yùn)用在線地圖軟件轉(zhuǎn)換，如谷歌地圖、百度地圖等。以谷歌地圖為例，把剛才得到的經(jīng)緯度用網(wǎng)址的形式發(fā)送到谷歌地圖開放接口，如發(fā)送成功地圖會(huì)返回用戶所在的具體位置信息。實(shí)現(xiàn)方法是把剛才的經(jīng)緯度信息連接起來(lái)賦給某個(gè)變量，如：

var latlon = position.coords.latitude+'，'+position.coords.longitude；

然后再把這個(gè)帶有經(jīng)緯度信息的latlon變量寫到谷歌地圖的網(wǎng)址中：

http：//maps.google.cn/maps/api/geocode/json？latlng='+latlon+'&language=CN

這樣谷歌的這個(gè)開放接口就會(huì)返回一串現(xiàn)實(shí)有意義的地址信息，再將獲取到的信息輸出即可看到結(jié)果。當(dāng)然，地址信息呈現(xiàn)還有以圖像形式展示的，這種形式又分為靜態(tài)地圖圖片和動(dòng)態(tài)地圖圖片，靜態(tài)的圖片相當(dāng)于截圖，是不會(huì)變化的。而動(dòng)態(tài)地圖圖片是會(huì)根據(jù)移動(dòng)設(shè)備位置的改變而不斷更新位置，這種方式更智能也更貼合商務(wù)企業(yè)的服務(wù)理念。

4 小結(jié)

隨著國(guó)家倡導(dǎo)無(wú)線城市建設(shè)的理念，以及智能手機(jī)和平板電腦的大規(guī)模使用，各種網(wǎng)站及應(yīng)用APP的開發(fā)都需要基于地理位置提供的服務(wù)，Html5提供了Geolocation API接口，能方便快捷地實(shí)現(xiàn)地理位置的定位與跟蹤，并允許用戶將所得到的位置信息與谷歌及百度地圖轉(zhuǎn)換，這一功能可以幫助開發(fā)者開發(fā)基于位置服務(wù)的各種應(yīng)用程序，推送所在位置周邊相關(guān)的商業(yè)信息，提供優(yōu)質(zhì)的個(gè)性化服務(wù)。

參考文獻(xiàn)

[1]梁莉菁.基于Geolocation API的Html5地理位置追蹤定位的實(shí)現(xiàn)[J].萍鄉(xiāng)高等?？茖W(xué)校學(xué)報(bào)，2014

[2]滕文.基于HTML5定位移動(dòng)互聯(lián)站點(diǎn)的研究與設(shè)計(jì)[J].民營(yíng)科技，2013.

[3]魯立，劉楨.基于HTML5地理定位技術(shù)的移動(dòng)終端導(dǎo)航設(shè)計(jì)[J].電子設(shè)計(jì)工程，2012.

[4]張亞飛.手機(jī)網(wǎng)頁(yè)及網(wǎng)站設(shè)計(jì)[M].北京：清華大學(xué)出版社，2013.

[5]劉增杰，臧順娟，何楚斌.精通HTML5+CSS3+JavaScript網(wǎng)頁(yè)設(shè)計(jì)[M].北京：清華大學(xué)出版社，2015.

[6]月光光.HTML5獲取地理位置定位信息.[DB/OL].[2015-04].http：//www.helloweba.com/view-blog-300.html

作者簡(jiǎn)介

朱國(guó)藝（1983-），男，廣東省中山市人?，F(xiàn)為中山市中等專業(yè)學(xué)校計(jì)算機(jī)中級(jí)講師，研究生學(xué)歷、教育碩士學(xué)位。研究方向?yàn)橐苿?dòng)互聯(lián)、數(shù)字多媒體技術(shù)。

周玉珍（1989-），女，廣東省中山市人。大學(xué)本科學(xué)歷。就職于中山市中等專業(yè)學(xué)校。研究方向?yàn)橐苿?dòng)互聯(lián)、數(shù)字多媒體技術(shù)。

作者單位

中山市中等專業(yè)學(xué)校 廣東省中山市 528400