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