HTML5中地理位置定位技術的應用與探究

朱國藝++周玉珍

摘 要隨著移動終端設備的飛速發展，App應用開發中地理位置定位（Geolocation）成為了當前互聯網最為熱門的技術之一，它可以獲得用戶當前的位置信息，結合谷歌或百度地圖的開放接口，能夠為客戶提供全面的移動信息服務。通過分析HTML5地理定位技術的工作原理，它主要使用Geolocation API對象來獲取具體位置的經緯度信息，通過在線地圖的接口地址轉換，可實現位置定位技術的商業化應用。

【關鍵詞】HTML5 位置定位 移動終端 地圖服務

1 服務應用

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

2 工作原理

在訪問位置信息前，瀏覽器都會詢問用戶是否共享其位置信息，它必須在用戶的允許下才能進行，以谷歌瀏覽器為例，當訪問具有地理定位的網站時，它會彈出一個對話框，詢問你是否允許網站獲取你的位置信息。雖然每次都要點擊一次，但也不要覺得繁瑣，因為這是給用戶提供一道安全門，只有你同意開門，私人信息才會共享出去。如果你允許瀏覽器與網站共享您的位置，瀏覽器會向 Google 位置服務發送本地網絡信息，計算出您所在的位置。

由于網絡訪問方式的不同，確定位置信息也有多種方法。如通過獲取電腦IP地址去獲取具體位置，但此種方法有局限性，因為IP地址受網絡服務商的管理和分配，或者在有用戶使用代理等方式上網的情況下，可能會造成數據不準確。另一種運用智能手機上網，是通過獲取客戶的手機信號接收塔，或者是設備中的GPS來定位并獲取具體信息，基本可以得到相對精確的位置信息。這個位置信息一般是指獲取當前位置的經度和緯度，再通過強大的在線地圖服務把這個經緯度信息轉換成具體的地址。這個地址信息可以供網絡應用程序調用，從而推送一些本地或附近的內容信息。

3 技術實現

3.1 瀏覽器支持檢測

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

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

}else{

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

}

這是一個簡單的選擇語句，如果支持位置定位功能的瀏覽器，可進行下一步的獲取信息編程。

3.2 獲取經緯度

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

if （navigator.geolocation）{

navigator.geolocation.getCurrentPosition（showPosition）；

}else{

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

}

這樣通過getCurrentPosition方法就獲取到了當前具體的地理位置信息，最后通過showPosition回調函數，輸出相應的信息到顯示器。showPosition函數代碼如下：

function showPosition（position）{

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

var lag = position.coords.longitude； //經度

alert（'緯度：'+lat+'，經度：'+lag）；

}

其中，Latitude代表緯度，longitude代表經度，當獲取成功之后會返回一個position對象，這個對象的coords屬性即是坐標屬性，返回了經、緯度的坐標數據。

3.3 地圖地址轉換

獲取了相應的經緯度信息之后，它是一個數字形式展現，如經度：121.542121，緯度：29.254514，這樣還不能具體到所在國家及省份、城市等詳細信息，也就不能更好地運用網站的本地服務。解決的方法是運用在線地圖軟件轉換，如谷歌地圖、百度地圖等。以谷歌地圖為例，把剛才得到的經緯度用網址的形式發送到谷歌地圖開放接口，如發送成功地圖會返回用戶所在的具體位置信息。實現方法是把剛才的經緯度信息連接起來賦給某個變量，如：

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

然后再把這個帶有經緯度信息的latlon變量寫到谷歌地圖的網址中：

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

這樣谷歌的這個開放接口就會返回一串現實有意義的地址信息，再將獲取到的信息輸出即可看到結果。當然，地址信息呈現還有以圖像形式展示的，這種形式又分為靜態地圖圖片和動態地圖圖片，靜態的圖片相當于截圖，是不會變化的。而動態地圖圖片是會根據移動設備位置的改變而不斷更新位置，這種方式更智能也更貼合商務企業的服務理念。

4 小結

隨著國家倡導無線城市建設的理念，以及智能手機和平板電腦的大規模使用，各種網站及應用APP的開發都需要基于地理位置提供的服務，Html5提供了Geolocation API接口，能方便快捷地實現地理位置的定位與跟蹤，并允許用戶將所得到的位置信息與谷歌及百度地圖轉換，這一功能可以幫助開發者開發基于位置服務的各種應用程序，推送所在位置周邊相關的商業信息，提供優質的個性化服務。

參考文獻

[1]梁莉菁.基于Geolocation API的Html5地理位置追蹤定位的實現[J].萍鄉高等專科學校學報，2014

[2]滕文.基于HTML5定位移動互聯站點的研究與設計[J].民營科技，2013.

[3]魯立，劉楨.基于HTML5地理定位技術的移動終端導航設計[J].電子設計工程，2012.

[4]張亞飛.手機網頁及網站設計[M].北京：清華大學出版社，2013.

[5]劉增杰，臧順娟，何楚斌.精通HTML5+CSS3+JavaScript網頁設計[M].北京：清華大學出版社，2015.

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

作者簡介

朱國藝（1983-），男，廣東省中山市人。現為中山市中等專業學校計算機中級講師，研究生學歷、教育碩士學位。研究方向為移動互聯、數字多媒體技術。

周玉珍（1989-），女，廣東省中山市人。大學本科學歷。就職于中山市中等專業學校。研究方向為移動互聯、數字多媒體技術。

作者單位

中山市中等專業學校 廣東省中山市 528400