HTML5中地理定位與第三方工具百度地圖如何結(jié)合使用-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關HTML5中地理定位與第三方工具百度地圖如何結(jié)合使用的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)是一家專業(yè)提供雄縣企業(yè)網(wǎng)站建設,專注與成都網(wǎng)站制作、做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設、HTML5、小程序制作等業(yè)務。10年已為雄縣眾多企業(yè)、政府機構(gòu)等服務。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進行中。

一、HTML5的新特性--地理定位
既然地理定位是HTML5的新特性，那么我們也是要學習和掌握相關的API和學會如何去使用地理定位的
先了解一下常識

一個新名詞Geolocation:

用于獲得當前瀏覽器所在的地理坐標，從而提供LBS（Location Based Service），如餓了嗎送餐、滴滴打車、高德導航等軟件都是使用LBS，包括如下數(shù)據(jù)：
經(jīng)度： longitude
緯度： latitude
海拔高度： altitude
速度： speed

使用平臺分為移動端和PC端：
(1)手機瀏覽器：
首先嘗試使用內(nèi)置GPS數(shù)據(jù)——精度以米為單位
再則使用手機基站編號反向推導出對應的地理位置——定位精度以公里為單位
(2)PC瀏覽器：
通過電腦的IP地址反向查詢——精度以公里為單位

正題：
那么我們到底怎么樣從HTML5中獲取定位信息呢？
首先，我們在瀏覽器中按F12打開console，輸入window.navigator.geolocation看看定位信息！

HTML5中地理定位與第三方工具百度地圖如何結(jié)合使用

我們看到定位信息上有主要三個方法，含義分別是：

getCurrentPosition:fn(succ,err) //獲取當前定位數(shù)據(jù),其中包含成功獲取和獲取失敗的回調(diào)函數(shù)
watchPosition: fn   //監(jiān)視定位數(shù)據(jù)
clearWatch: fn   //清除定位監(jiān)視

既然這樣我們就知道如何在HTML5文件中使用地理定位了，我們利用開發(fā)工具創(chuàng)建一個HTML文件，并創(chuàng)建一個按鈕，當點擊按鈕的時候，后臺顯示定位信息！

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
</head>  
<body>  
<button id="btn">獲得我的定位數(shù)據(jù)</button>  
<script>  
    btn.onclick=function(){   //點擊按鈕時觸發(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>

HTML5中地理定位與第三方工具百度地圖如何結(jié)合使用

如圖所示，當點擊按鈕時，成功獲取到了定位數(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
}
)

二、使用第三方工具--百度地圖

正如我在前言中提到，在項目和許多手機應用中都是使用百度地圖提供給用戶來選擇定位信息，那么我們怎么樣在自己項目中使用百度地圖呢？

首先我們得知道，百度地圖的源代碼是不會提供給大家下載的，這涉及公司利益，懂得人不必多說，但是百度還是個很有良心的公司，可以讓我們注冊開發(fā)者賬號來進行開發(fā)使用！

使用步驟：

首先打開官網(wǎng)http://lbsyun.baidu.com/，然后拉到最下面：

HTML5中地理定位與第三方工具百度地圖如何結(jié)合使用

可以看到，百度地圖可以用來進行web開發(fā)，Android開發(fā)，ios開發(fā)，這里我們使用web開發(fā)，點擊JavaScript API
網(wǎng)址：http://lbsyun.baidu.com/index.php?title=jspopular
我們可以到API中的許多案例和功能展示，要使用百度地圖，必須首先獲取密鑰！

HTML5中地理定位與第三方工具百度地圖如何結(jié)合使用

稍后會解釋什么是密鑰，先點擊進入頁面，如果彈出登陸界面的話，則登陸，登陸點擊注冊開發(fā)者賬號(由于我已近注冊了，所以這里無法給大家演示，需要大家自己操作)，輸入相關的手機，郵箱，然后到郵箱里面驗證，驗證成功后,，點擊創(chuàng)建應用，會出現(xiàn)如下界面：

HTML5中地理定位與第三方工具百度地圖如何結(jié)合使用

應用名稱隨意填寫一個
應用類型選擇---瀏覽器端
Referer白名單：指的是誰可以訪問你的應用，通過什么方式訪問你的應用，這里填寫一個星號' * '，意思是全部人都可以訪問，因為只是做測試可以這樣做，到以后項目如果使用到，會有相關的加密方式等等??！然后點擊提交完成創(chuàng)建??！
完成應用的創(chuàng)建后，出現(xiàn)如下界面：

HTML5中地理定位與第三方工具百度地圖如何結(jié)合使用

這里會顯示剛才創(chuàng)建的應用編號，應用名稱，以及最重要的訪問應用碼，就是前面提到的密鑰!

然后得到密鑰之后，我們回到主頁http://lbsyun.baidu.com/index.php?title=jspopular
點擊左側(cè)的開發(fā)指南，可以看到相關API的用法以及案例??！，這個API是小編看到的所以API中最良心的，沒有一句廢話，
寫的很詳細，通俗易懂，因為實在太多了，就在這里介紹幾個主要的用法！??！

HTML5中地理定位與第三方工具百度地圖如何結(jié)合使用

我們創(chuàng)建一個新的HTML文件，將上面這段代碼復制到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>  
<h2>使用百度地圖</h2>  
<div id="container"></div>  
<script type="text/javascript">  
    // 創(chuàng)建地圖實例，避免與Map重名，所以使用BMap.Map  
    var map = new BMap.Map("container");  
    // 創(chuàng)建點坐標  
    var point = new BMap.Point(113.946317,22.549008);  
    // 初始化地圖，設置中心點坐標和地圖級別 1~18級  
    map.centerAndZoom(point, 18);  
  
    //鼠標滾動，地圖縮放  
    map.enableScrollWheelZoom(true);  
  
    //添加地圖控件  
    map.addControl(new BMap.NavigationControl());  
    map.addControl(new BMap.OverviewMapControl());  
    map.addControl(new BMap.ScaleControl());  
    map.addControl(new BMap.MapTypeControl());  
  
    //添加地圖標注  
    var marker=map.addOverlay(new BMap.Marker(point));  
  
     
    
  
</script>  
</body>  
</html>

使用百度地圖：

HTML5中地理定位與第三方工具百度地圖如何結(jié)合使用

OK，我們成功的在HTML文件中使用了百度地圖，現(xiàn)在可以像在http://map.baidu.com中一樣使用百度地圖了！！

相關函數(shù)說明：

 <script src="http://api.map.baidu.com/api?v=2.0&ak=您的網(wǎng)站在百度地圖申請的訪問秘鑰 ">
  </script>

在ak中輸入剛才得到那一長串密鑰即可引用百度地圖?。?/p>

創(chuàng)建地圖實例 --必選。

var map = new BMap.Map("container");

創(chuàng)建一個指定的點，你的經(jīng)緯度信息??！如果不知道可以使用前面的
navigator.geolocation.getCurrentPosotion方法來得到經(jīng)緯度--必選。

var point = new BMap.Point(116.300982,39.915907);

以指定點為中心顯示地圖數(shù)字17指的是層級，層級可以分為1~18級，層級越小地圖看的范圍越大，層級越大看的范圍越大，自己可以測試一下不同層級顯示的地圖效果！！---必選。

map.centerAndZoom(point, 17);

地圖可以隨著鼠標自由的縮放---可選。

map.enableScrollWheelZoom(true);

地圖顯示控件--效果自己測試，這里不是主要函數(shù)不再加以說明---可選。

map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.MapTypeControl());

地圖上顯示一個標注(標注)--可選

var marker=map.addOverlay(new BMap.Marker(point));

OK，第三方百度地圖就說到這里，還有許多好玩的函數(shù)可以自己使用，所以方法和參數(shù)都在API中可以找到！

感謝各位的閱讀！關于“HTML5中地理定位與第三方工具百度地圖如何結(jié)合使用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

本文標題：HTML5中地理定位與第三方工具百度地圖如何結(jié)合使用-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://www.rwnh.cn/article28/ccgjjp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、營銷型網(wǎng)站建設、網(wǎng)站導航、網(wǎng)站設計公司、全網(wǎng)營銷推廣、網(wǎng)站排名

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

HTML5中地理定位與第三方工具百度地圖如何結(jié)合使用-創(chuàng)新互聯(lián)