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

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

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

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

<p id="p1"></p>---------》用來(lái)存放一會(huì)兒我們獲得當(dāng)?shù)氐淖鴺?biāo)點(diǎn)的數(shù)據(jù)；

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

接下來(lái)就是我們的js代碼：

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

if (navigator.geolocation)
{
alert(1);---------------->主要是用在這里作為測(cè)試，這是為了直觀顯示所以用了alert方法，不過(guò)這個(gè)方法會(huì)阻止代碼的加載，所以還是建議用cconsole.log控制臺(tái)輸出。
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實(shí)例
map.centerAndZoom(new BMap.Point(lo,la), 15); ——————》初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
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è)置地圖顯示的城市 此項(xiàng)是必須設(shè)置的
}

既然我們可以

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

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

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

?

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

同樣是給一個(gè)p標(biāo)簽存放我們一會(huì)兒得到的坐標(biāo)的數(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的功能確實(shí)很強(qiáng)大，但是并不是萬(wàn)能的，當(dāng)然還是存在著一定的問(wèn)題，所以在學(xué)習(xí)的時(shí)候進(jìn)行有選擇的吸收。

?

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

總結(jié)

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

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