一，分析

沒有H5之前定位很困難，H5新增的geolocation功能方便了LBS位置服務方面的應用。通過百度地圖開放的API介面可以很容易實現定位，附近，距離，導航，運動等一系列功能。引用google地圖API也可以。例子原始碼最後分享出來。

二，百度地圖API介面

首先獲取位置方法有，ip地址，GPS，wifi基站的mac地址，GSM,CDMA基站等。

使用百度地圖API介面1.5以上版本需要申請金鑰進行引用。1.5以下的版本不用。申請百度雲平臺的金鑰可以享受百度提供的任何開放服務。

申請流程如下：

開啟map.baidu.com,登入百度賬號，選擇開發下的javascript

在左側導航欄會看到相應的功能選單，第一個為獲取金鑰，如果用1.5以上版本則需獲取，否則不用，如下圖：

獲取金鑰時，如果已經註冊成為百度開發者，則直接獲取，如果沒有，會提示你請註冊成為百度開發者，頁面會在幾秒之後自動跳轉，註冊頁面如下：

填入相應資訊，然後獲取金鑰即可。

三，引入地圖API

如果使用1.5以上版本，引入下面script，ak後跟申請的金鑰，匯入方法如下：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的金鑰"></script>

1.5以下版本如下，以1.4版本為例，沒有ak引數：

<script type="text/javascript" src="http://api.map.baidu.com?v=1.4"></script>

使用時直接將其引入即可。

四，頁面例項

佈局如下：

很簡單，一個按鈕，一個div，給出div一個樣式，將地圖API接入進來，這裡用的是1.4版本。

介面如下：

在上圖中，獲取金鑰導航欄下有一個demo例項，點選並開啟：

最左側是例項列表，涵蓋了所有會應用到的，具體需求你可以找，以地圖展示為例，中間是程式碼部分，如圖。

具體用到的只有幾行程式碼，功能百度都封裝好了，我們不用管，直接呼叫就可以了。右側是地圖展示，中間程式碼執行後的結果

我們將核心的那幾行程式碼複製過來，如下圖：

當頁面開啟時，載入紅框中的javascript程式碼。

獲取到我們的按鈕後，新增一個點選事件，navigator.geolocation.getCurrentPosition是單次請求，意識是請求你的位置資訊，當你點選請求按鈕後，會彈框詢問，是否要共享其位置，以保護使用者的隱私權。

Position.coords.longitude獲取到使用者的經度。

Position.coords.latitude獲取到使用者的緯度。

上面是我們的程式碼，下面有六行程式碼，是百度地圖API的，不用我們寫，複製過來就可以。

1.新建一個map地圖物件，傳入一個引數，將我們的div框傳入。可以知道，百度地圖封裝為一個物件，呼叫很方便。

2.Map物件中的point方法用於獲取使用者的位置，將我們得到的xy經度和緯度傳入。

3.Map.centerAndZoom將我們獲取的位置傳入地圖中，15是精準度，這裡我們選高的15，精準一點。

4.Map.enableScrollWheelZoom是開啟滾動，字面就可以理解，滾動放大縮小功能。

5.新建我們的地圖物件。

6.新增到物件中。

五，頁面執行

必須使用支援H5的瀏覽器執行，否則不會出現結果。這裡以IE9為例：如下圖：

瀏覽器會提示你，是否共享位置資訊，這裡一定要同意，允許一次，或者始終允許。

頁面執行結果如下：

六，geolocation說明

geolocation分為單詞請求和多次請求。

Geocurrentposition為單詞請求，watchposition為多次請求，他們的方法屬性都是一樣的。都帶有回掉函式。具體使用在這裡不闡述。

這裡只是一個簡單例子，具體可以去百度搜索一下geolocation應用和知識點。

七，總結

電腦應用一般只能通過ip獲取位置，會有誤差。現在的移動裝置瀏覽器基本都支援H5的應用，可以拿做好的例項去手機端測試。現在的附近人功能或者附近美食店功能，運動記錄等我們都可以通過h5來實現，如果有問題可以留言一起討論。拋磚引玉到此結束。

原始碼下載地址：連結：http://pan.baidu.com/s/1pKoJqbh 密碼：13d3