看到了很多技術大牛和相關博客，很少關於HTML5的地理定位的描述，不知道他們是不願意提及還是使用的少的原因，我個人按一點點經驗總結了兩方面原因：
第一、服務商方面的原因，因為HTML5的定位是由google提供的，由於google將大陸封殺的原因，定位功能也不在支持，這是主要原因
第二、HTML5自帶的地理定位，性能較差，相對於第三方工具---類似百度地圖等，不是在一個層次上，在真正項目開發的時候，很少使用原生HTML5自帶的地理定位，這是次要原因！
一、HTML5的新特性--地理定位既然地理定位是HTML5的新特性，那麼我們也是要學習和掌握相關的API和學會如何去使用地理定位的
先了解一下常識
一個新名詞Geolocation:
用於獲得當前瀏覽器所在的地理坐標，從而提供LBS（Location Based Service），如餓了嗎送餐、滴滴打車、高德導航等軟件都是使用LBS，包括如下數據：
經度： longitude
緯度： latitude
海拔高度： altitude
速度： speed
使用平台分為移動端和PC端：
(1)手機瀏覽器：
首先嘗試使用內置GPS數據-精度以米為單位
再則使用手機基站編號反向推導出對應的地理位置-定位精度以公里為單位
(2)PC瀏覽器：
通過電腦的IP地址反向查詢-精度以公里為單位
正題：
那麼我們到底怎麼樣從HTML5中獲取定位信息呢？首先，我們在瀏覽器中按F12打開console，輸入window.navigator.geolocation看看定位信息！
我們看到定位信息上有主要三個方法，含義分別是：
getCurrentPosition:fn(succ,err) //獲取當前定位數據,其中包含成功獲取和獲取失敗的回調函數watchPosition: fn //監視定位數據clearWatch: fn //清除定位監視
既然這樣我們就知道如何在HTML5文件中使用地理定位了，我們利用開發工具創建一個HTML文件，並創建一個按鈕，當點擊按鈕的時候，後台顯示定位信息！
<!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> </head> <body> <button id=btn>獲得我的定位數據</button > <script> btn.onclick=function(){ //點擊按鈕時觸發navigator.geolocation.getCurrentPosition(succCB,errCB); function succCB(pos){ //成功的獲取回調函數！ ！ console.log('成功獲取到定位數據'); console.log('緯度:'+pos.coords.longitude); console.log('經度:'+pos.coords.latitude); console.log('高度:'+pos.coords.altitude); console.log('速度:'+pos.coords.speed); } function errCB(err){ //獲取失敗的回調函數！ ！ console.log('獲取到定位數據失敗'); console.log(err.message); //輸出失敗的信息或原因！ } } </script> </body> </html>如圖所示，當點擊按鈕時，成功獲取到了定位數據，但是高度和速度由於PC端原因所以為Null，所以我們只要記住一個方法就可以在HTML5中獲取到地理定位！
navigator.geolocation.getCurrentPosotion(function(pos){console.log('定位數據獲取成功');//pos.coords.longtitude ....},function(err){console.log('定位數據獲取失敗');//err.code err.message})二、使用第三方工具--百度地圖正如我在前言中提到，在項目和許多手機應用中都是使用百度地圖提供給用戶來選擇定位信息，那麼我們怎麼樣在自己項目中使用百度地圖呢？
首先我們得知道，百度地圖的源代碼是不會提供給大家下載的，這涉及公司利益，懂得人不必多說，但是百度還是個很有良心的公司，可以讓我們註冊開發者賬號來進行開發使用！
使用步驟：
首先打開官網http://lbsyun.baidu.com/，然後拉到最下面：
可以看到，百度地圖可以用來進行web開發，Android開發，ios開發，這裡我們使用web開發，點擊JavaScript API
網址：http://lbsyun.baidu.com/index.php?title=jspopular
我們可以到API中的許多案例和功能展示，要使用百度地圖，必須首先獲取密鑰！
稍後會解釋什麼是密鑰，先點擊進入頁面，如果彈出登陸界面的話，則登陸，登陸點擊註冊開發者賬號(由於我已近註冊了，所以這裡無法給大家演示，需要大家自己操作)，輸入相關的手機，郵箱，然後到郵箱裡面驗證，驗證成功後,，點擊創建應用，會出現如下界面：
應用名稱隨意填寫一個
應用類型選擇---瀏覽器端
Referer白名單：指的是誰可以訪問你的應用，通過什麼方式訪問你的應用，這裡填寫一個星號' * '，意思是全部人都可以訪問，因為只是做測試可以這樣做，到以後項目如果使用到，會有相關的加密方式等等！ ！然後點擊提交完成創建！ ！
完成應用的創建後，出現如下界面：
這裡會顯示剛才創建的應用編號，應用名稱，以及最重要的訪問應用碼，就是前面提到的密鑰!
然後得到密鑰之後，我們回到主頁http://lbsyun.baidu.com/index.php?title=jspopular
點擊左側的開髮指南，可以看到相關API的用法以及案例！ ！ ，這個API是小編看到的所以API中最良心的，沒有一句廢話，
寫的很詳細，通俗易懂，因為實在太多了，就在這裡介紹幾個主要的用法！ ！ ！
我們創建一個新的HTML文件，將上面這段代碼複製到HTML文件中
<!DOCTYPE html> <html> <head> <meta charset=UTF-8/> <script type=text/javascript src=http://api.map.baidu.com/api?v=2.0&ak=jrbPiu6jcbPsxGvdQXAc0C. .....> //v2.0版本的引用方式：src=http://api.map.baidu.com/api?v=2.0&ak=您的密鑰//v1.4版本及以前版本的引用方式：src=http://api.map.baidu.com/api?v=1.4&key=您的密鑰&callback=initialize </script> <style> #container{ width: 800px; height: 500px; } </style> </head> <body> <h1>使用百度地圖</h1> <div id=container></div> <script type=text/javascript> // 創建地圖實例，避免與Map重名，所以使用BMap.Map var map = new BMap.Map(container); // 創建點坐標var point = new BMap.Point(113.946317,22.549008); // 初始化地圖，設置中心點坐標和地圖級別1~ 18級map.centerAndZoom(point, 18); //鼠標滾動，地圖縮放map.enableScrollWheelZoom(true); //添加地圖控件map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.OverviewMapControl ()); map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.MapTypeControl()); //添加地圖標註var marker=map.addOverlay(new BMap.Marker(point)); < /script> </body> </html>使用百度地圖：
OK，我們成功的在HTML文件中使用了百度地圖，現在可以像在http://map.baidu.com中一樣使用百度地圖了！ ！
相關函數說明：
<script src=http://api.map.baidu.com/api?v=2.0&ak=您的網站在百度地圖申請的訪問秘鑰> </script>
在ak中輸入剛才得到那一長串密鑰即可引用百度地圖！ ！
創建地圖實例--必選。
var map = new BMap.Map(container);
創建一個指定的點，你的經緯度信息！ ！如果不知道可以使用前面的
navigator.geolocation.getCurrentPosotion方法來得到經緯度--必選。
var point = new BMap.Point(116.300982,39.915907);
以指定點為中心顯示地圖數字17指的是層級，層級可以分為1~18級，層級越小地圖看的範圍越大，層級越大看的範圍越大，自己可以測試一下不同層級顯示的地圖效果！ ！ ---必選。
map.centerAndZoom(point, 17);
地圖可以隨著鼠標自由的縮放---可選。
map.enableScrollWheelZoom(true);
地圖顯示控件--效果自己測試，這裡不是主要函數不再加以說明---可選。
map.addControl(new BMap.NavigationControl());map.addControl(new BMap.OverviewMapControl());map.addControl(new BMap.ScaleControl());map.addControl(new BMap.MapTypeControl());
地圖上顯示一個標註(標註)--可選
var marker=map.addOverlay(new BMap.Marker(point));
OK，第三方百度地圖就說到這裡，還有許多好玩的函數可以自己使用，所以方法和參數都在API中可以找到！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。