這篇文章主要為大家詳細(xì)介紹了HTML5地理定位以及在項(xiàng)目中使用百度地圖的方法，圖文詳解容易學(xué)習(xí)，配合代碼閱讀理解效果更佳，非常適合初學(xué)者入門(mén)，感興趣的小伙伴們可以參考一下。
一、HTML5的新特性--地理定位
既然地理定位是HTML5的新特性，那么我們也是要學(xué)習(xí)和掌握相關(guān)的API和學(xué)會(huì)如何去使用地理定位的
先了解一下常識(shí)
一個(gè)新名詞Geolocation:
用于獲得當(dāng)前瀏覽器所在的地理坐標(biāo)，從而提供LBS（Location Based Service），如餓了嗎送餐、滴滴打車(chē)、高德導(dǎo)航等軟件都是使用LBS，包括如下數(shù)據(jù)：
經(jīng)度： longitude
緯度： latitude
海拔高度： altitude
速度： speed
使用平臺(tái)分為移動(dòng)端和PC端：
(1)手機(jī)瀏覽器：
首先嘗試使用內(nèi)置GPS數(shù)據(jù)——精度以米為單位
再則使用手機(jī)基站編號(hào)反向推導(dǎo)出對(duì)應(yīng)的地理位置——定位精度以公里為單位
(2)PC瀏覽器：
通過(guò)電腦的IP地址反向查詢——精度以公里為單位
正題：
那么我們到底怎么樣從HTML5中獲取定位信息呢？
首先，我們?cè)跒g覽器中按F12打開(kāi)console，輸入window.navigator.geolocation看看定位信息！
我們看到定位信息上有主要三個(gè)方法，含義分別是：
getCurrentPosition:fn(succ,err) //獲取當(dāng)前定位數(shù)據(jù),其中包含成功獲取和獲取失敗的回調(diào)函數(shù) watchPosition: fn //監(jiān)視定位數(shù)據(jù) clearWatch: fn //清除定位監(jiān)視
既然這樣我們就知道如何在HTML5文件中使用地理定位了，我們利用開(kāi)發(fā)工具創(chuàng)建一個(gè)HTML文件，并創(chuàng)建一個(gè)按鈕，當(dāng)點(diǎn)擊按鈕的時(shí)候，后臺(tái)顯示定位信息！
重慶分公司
重慶分公司
如圖所示，當(dāng)點(diǎn)擊按鈕時(shí)，成功獲取到了定位數(shù)據(jù)，但是高度和速度由于PC端原因所以為Null，所以我們只要記住一個(gè)方法就可以在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)用中都是使用百度地圖提供給用戶來(lái)選擇定位信息，那么我們?cè)趺礃釉谧约喉?xiàng)目中使用百度地圖呢？
首先我們得知道，百度地圖的源代碼是不會(huì)提供給大家下載的，這涉及公司利益，懂得人不必多說(shuō)，但是百度還是個(gè)很有良心的公司，可以讓我們注冊(cè)開(kāi)發(fā)者賬號(hào)來(lái)進(jìn)行開(kāi)發(fā)使用！
使用步驟：
首先打開(kāi)官網(wǎng)http://lbsyun.baidu.com/，然后拉到最下面：
可以看到，百度地圖可以用來(lái)進(jìn)行web開(kāi)發(fā)，Android開(kāi)發(fā)，ios開(kāi)發(fā)，這里我們使用web開(kāi)發(fā)，點(diǎn)擊JavaScript API
網(wǎng)址：http://lbsyun.baidu.com/index.php?title=jspopular
我們可以到API中的許多案例和功能展示，要使用百度地圖，必須首先獲取密鑰！
稍后會(huì)解釋什么是密鑰，先點(diǎn)擊進(jìn)入頁(yè)面，如果彈出登陸界面的話，則登陸，登陸點(diǎn)擊注冊(cè)開(kāi)發(fā)者賬號(hào)(由于我已近注冊(cè)了，所以這里無(wú)法給大家演示，需要大家自己操作)，輸入相關(guān)的手機(jī)，郵箱，然后到郵箱里面驗(yàn)證，驗(yàn)證成功后,，點(diǎn)擊創(chuàng)建應(yīng)用，會(huì)出現(xiàn)如下界面：
應(yīng)用名稱(chēng)隨意填寫(xiě)一個(gè)
應(yīng)用類(lèi)型選擇---瀏覽器端
Referer白名單：指的是誰(shuí)可以訪問(wèn)你的應(yīng)用，通過(guò)什么方式訪問(wèn)你的應(yīng)用，這里填寫(xiě)一個(gè)星號(hào)' * '，意思是全部人都可以訪問(wèn)，因?yàn)橹皇亲鰷y(cè)試可以這樣做，到以后項(xiàng)目如果使用到，會(huì)有相關(guān)的加密方式等等?。∪缓簏c(diǎn)擊提交完成創(chuàng)建?。?br/>完成應(yīng)用的創(chuàng)建后，出現(xiàn)如下界面：
這里會(huì)顯示剛才創(chuàng)建的應(yīng)用編號(hào)，應(yīng)用名稱(chēng)，以及最重要的訪問(wèn)應(yīng)用碼，就是前面提到的密鑰!
然后得到密鑰之后，我們回到主頁(yè)http://lbsyun.baidu.com/index.php?title=jspopular
點(diǎn)擊左側(cè)的開(kāi)發(fā)指南，可以看到相關(guān)API的用法以及案例??！，這個(gè)API是小編看到的所以API中最良心的，沒(méi)有一句廢話，
寫(xiě)的很詳細(xì)，通俗易懂，因?yàn)閷?shí)在太多了，就在這里介紹幾個(gè)主要的用法！?。?/p>
我們創(chuàng)建一個(gè)新的HTML文件，將上面這段代碼復(fù)制到HTML文件中
使用百度地圖
使用百度地圖：
OK，我們成功的在HTML文件中使用了百度地圖，現(xiàn)在可以像在http://map.baidu.com中一樣使用百度地圖了！！
相關(guān)函數(shù)說(shuō)明：
在ak中輸入剛才得到那一長(zhǎng)串密鑰即可引用百度地圖??！
創(chuàng)建地圖實(shí)例 --必選。
var map = new BMap.Map("container");
創(chuàng)建一個(gè)指定的點(diǎn) ，你的經(jīng)緯度信息??！如果不知道可以使用前面的
navigator.geolocation.getCurrentPosotion方法來(lái)得到經(jīng)緯度--必選。
var point = new BMap.Point(116.300982,39.915907);
以指定點(diǎn)為中心顯示地圖 數(shù)字17指的是層級(jí)，層級(jí)可以分為1~18級(jí)，層級(jí)越小地圖看的范圍越大，層級(jí)越大看的范圍越大，自己可以測(cè)試一下不同層級(jí)顯示的地圖效果??！---必選。
map.centerAndZoom(point, 17);
地圖可以隨著鼠標(biāo)自由的縮放---可選。
map.enableScrollWheelZoom(true);
地圖顯示控件--效果自己測(cè)試，這里不是主要函數(shù)不再加以說(shuō)明---可選。
map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.OverviewMapControl()); map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.MapTypeControl());
地圖上顯示一個(gè)標(biāo)注(標(biāo)注)--可選
var marker=map.addOverlay(new BMap.Marker(point));
以上就是HTML5地理定位介紹以及在項(xiàng)目中使用百度地圖的方法，內(nèi)容較為全面，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ骺赡軙?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
