這篇文章主要講解了“html5怎么實(shí)現(xiàn)定位并在百度地圖上顯示的功能”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“html5怎么實(shí)現(xiàn)定位并在百度地圖上顯示的功能”吧！

鄂州網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)成立于2013年到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

在開發(fā)移動(dòng)端 web 或者webapp時(shí)，使用百度地圖 API 的過(guò)程中，經(jīng)常需要通過(guò)手機(jī)定位獲取當(dāng)前位置并在地圖上居中顯示出來(lái)，這就需要用到html5的地理定位功能。

代碼如下:

navigator.geolocation.getCurrentPosition(callback);

在獲取坐標(biāo)成功之后會(huì)執(zhí)行回調(diào)函數(shù) callback; callback 方法的參數(shù)就是獲取到的坐標(biāo)點(diǎn)；然后可以初始化地圖，設(shè)置控件、中心點(diǎn)、縮放等級(jí)，然后給地圖添加point的overlay：

代碼如下:

var map = new BMap.Map("mapDiv");//mapDiv為放地圖的 div 的 id
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.centerAndZoom(point, 15);//point為坐標(biāo)點(diǎn)，15為地圖縮放級(jí)別，最大級(jí)別是 18
var pointMarker = new BMap.Marker(point);
map.addOverlay(pointMarker);

然而事實(shí)上這樣還不夠，顯示出來(lái)的結(jié)果并不準(zhǔn)，這是因?yàn)?getCurrentPosition 獲取到的坐標(biāo)是 GPS 經(jīng)緯度坐標(biāo)，而百度地圖的坐標(biāo)是經(jīng)過(guò)特殊轉(zhuǎn)換的，所以，在獲取定位坐標(biāo)和初始化地圖之間需要進(jìn)行一步坐標(biāo)轉(zhuǎn)換工作，該轉(zhuǎn)換方法百度API里面已經(jīng)提供了，轉(zhuǎn)換一個(gè)點(diǎn)或者批量裝換的方法均有提供：?jiǎn)蝹€(gè)點(diǎn)轉(zhuǎn)換需引用 http://developer.baidu.com/map/jsdemo/demo/convertor.js，批量轉(zhuǎn)換需引用 http://developer.baidu.com/map/jsdemo/demo/changeMore.js，這里只需要前者即可：

代碼如下:

BMap.Convertor.translate(gpsPoint, 0, callback);
//gpsPoint：轉(zhuǎn)換前坐標(biāo)，第二個(gè)參數(shù)為轉(zhuǎn)換方法，0表示gps坐標(biāo)轉(zhuǎn)換成百度坐標(biāo)，callback回調(diào)函數(shù)，參數(shù)為新坐標(biāo)點(diǎn)

例子的詳細(xì)代碼如下：（引用中的ak是申請(qǐng)的key）

代碼如下:

本人開發(fā)過(guò)程中覺(jué)得電腦的定位速度有點(diǎn)慢，經(jīng)常無(wú)法獲取坐標(biāo)導(dǎo)致地圖無(wú)法顯示，建議用手機(jī)測(cè)試，定位較快。

當(dāng)然了，如果僅是開發(fā)移動(dòng)端的網(wǎng)頁(yè)，就不需要使用jQuery，框架太大，可以換用其他輕量級(jí)的移動(dòng)端的 js 框架。

感謝各位的閱讀，以上就是“html5怎么實(shí)現(xiàn)定位并在百度地圖上顯示的功能”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)html5怎么實(shí)現(xiàn)定位并在百度地圖上顯示的功能這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！