在一些網(wǎng)站上，我們經(jīng)常會看到一些地址會有一個圖標的形式展現(xiàn)，當你點擊的時候就會加載一個你點擊區(qū)域的地圖出來，很神奇的一個功能，在之前是沒有這樣功能的，都是直接寫上地址，你要去的話自己找去吧，現(xiàn)在有了這個人性化的工具之后，我們要找什么地點就明確很多了，在上面可以看到周圍的具體環(huán)境啊，什么的，交通啊什么的都可以查到，那么，思考一下，要實現(xiàn)這個功能好像十分的困難吧，居然把一個地圖給精確定位，太不可思議了。

　　十分方便的是，我們的html5就能夠輕松的幫助我們搞定這個事情，下面我就介紹一下怎么實現(xiàn)地圖的呈現(xiàn)。

　　首先我們需要百度地圖API的接口，第一步，在百度的搜索欄輸入“百度地圖API”當頁面發(fā)生跳轉(zhuǎn)的時候找到“申請密鑰”按鈕，點擊之后在開發(fā)的位置會出現(xiàn)三個javascript 極速版，大眾版，開源庫，點擊選擇大眾版，之后跳轉(zhuǎn)頁面之后，就是獲得密鑰了，緊接著在API控制臺同意條件，然后就是一個繁瑣的注冊階段，相信大家都會，這個這冊的話是可以取得五個免費的API接口的，當注冊完成之后就可以創(chuàng)建我們的應(yīng)用了。緊接著就將我們的密鑰復(fù)制粘貼到訪問應(yīng)用AK?那個地方，最后就是在瀏覽器中設(shè)置允許網(wǎng)站跟蹤您的位置，這樣我們的前期準備工作就做好了，剩下的就是頁面上的事情了。

　　我們需要在頁面上有一個div來顯示我們的地圖展示，還需要js代碼來執(zhí)行，不過不用擔(dān)心，百度已經(jīng)幫我們寫好了代碼，我們只需要直接應(yīng)用就可以了，

<p id="p1"></p>---------》用來存放一會兒我們獲得當?shù)氐淖鴺它c的數(shù)據(jù)；

<button οnclick="getLocation()">click</button> ?在這里我們準備了一個函數(shù)用來觸發(fā)獲取位置這個事件，

接下來就是我們的js代碼：

<script type="text/javascript">
var p1=document.getElementById("p1")
function getLocation()
{

if (navigator.geolocation)
{
alert(1);---------------->主要是用在這里作為測試，這是為了直觀顯示所以用了alert方法，不過這個方法會阻止代碼的加載，所以還是建議用cconsole.log控制臺輸出。
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}---------->如果瀏覽器不支持的話，彈出這句話提示用戶。
}
function showPosition(position)
{
p1.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;-------------------------》在這里顯示獲取的經(jīng)度和緯度。
}
</script>

?

function showPosition(position)
{
var la= position.coords.latitude
var lo =position.coords.longitude

var map = new BMap.Map("container"); ----------》創(chuàng)建Map實例
map.centerAndZoom(new BMap.Point(lo,la), 15); ——————》初始化地圖,設(shè)置中心點坐標和地圖級別
map.addControl(new BMap.NavigationControl()); -------------》添加平移縮放控件
map.addControl(new BMap.ScaleControl()); -------------》添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); ----------》滾輪放大縮小
map.addControl(new BMap.MapTypeControl()); -------------->添加地圖/添加縮略地圖控件
map.enableScrollWheelZoom();-------------->啟用類型控件
map.setCurrentCity("成都"); ----------------->設(shè)置地圖顯示的城市 此項是必須設(shè)置的
}

既然我們可以

利用電腦進行定位，那么同時也可以用手機做一個導(dǎo)航的效果，但是前提是必須具備精準的導(dǎo)航功能，

watchPosition() - 返回用戶的當前位置，并繼續(xù)返回用戶移動時的更新位置（就像汽車上的 GPS）；

clearWatch() - 停止 watchPosition() 用clear方法進行清除watchPosition()方法，

?

下面我們進行手機的導(dǎo)航

同樣是給一個p標簽存放我們一會兒得到的坐標的數(shù)據(jù)，

var x=document.getElementById("p1")
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude
}

主要的原理和我們上面講到的百度地圖API相似，我們的html5的功能確實很強大，但是并不是萬能的，當然還是存在著一定的問題，所以在學(xué)習(xí)的時候進行有選擇的吸收。

?

轉(zhuǎn)載于:https://www.cnblogs.com/lanveer/p/4084199.html

總結(jié)

以上是生活随笔為你收集整理的html5 的百度地图连接的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。