詳解HTML5地理定位與第三方工具百度地圖的應用-H5教程-PHP中文網

首頁

web前端

H5教程

詳解HTML5地理定位與第三方工具百度地圖的應用

黄舟

Mar 13, 2017 pm 05:23 PM

這篇文章主要為大家詳細介紹了HTML5地理定位與第三方工具百度地圖的應用,具有一定的參考價值，有興趣的小伙伴們可以參考一下

#前言：
看到了很多技術大牛和相關博客，很少關於HTML5的地理定位的描述，不知道他們是不願意提及還是使用的少的原因，我個人按一點點經驗總結了兩方面原因：
第一、服務商方面的原因，因為HTML5的定位是由google提供的，由於google將大陸封殺的原因，定位功能也不在支持，這是主要原因
第二、HTML5自帶的地理定位，性能較差，相對於第三方工具---類似百度地圖等，不是在一個層次上，在真正項目開發的時候，很少使用原生HTML5自帶的地理定位，這是次要原因！

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

一個新名詞Geolocation:

用於獲得目前瀏覽器所在的地理座標，從而提供LBS（Location Based Service），如餓了嗎送餐、滴滴打車、高德導航等軟體都是使用LBS，包括如下資料：
經度： longitude
緯度：latitude
海拔高度：altitude
速度： speed

使用平台分為行動裝置和PC端：
(1)手機瀏覽器：
首先嘗試使用內建GPS資料－精準度以公尺為單位
再則使用手機基地台編號反向推導出對應的地理位置－定位精確度以公里為單位
(2)PC瀏覽器：
透過電腦的IP位址反向查詢——#精確度以公里為單位

正題：
那我們到底怎麼樣從HTML5中取得定位資訊呢？
首先，我們在瀏覽器中按F12開啟console，輸入window.navigator.geolocation看看定位資訊！

詳解HTML5地理定位與第三方工具百度地圖的應用

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

getCurrentPosition:fn(succ,err) //获取当前定位数据,其中包含成功获取和获取失败的回调函数
watchPosition: fn   //监视定位数据
clearWatch: fn   //清除定位监视

登入後複製

既然這樣我們就知道如何在HTML5文件中使用地理定位了，我們利用開發工具創建一個HTML文件，並創建一個按鈕，當點擊按鈕的時候，後台顯示定位資訊！

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
</head>  
<body>  
<button id="btn">获得我的定位数据</button>  
<script>  
    btn.onclick=function(){   //点击按钮时触发  
        navigator.geolocation.getCurrentPosition(succCB,errCB);  
  
        function succCB(pos){  //成功的获取回调函数！！  
            console.log(&#39;成功获取到定位数据&#39;);  
            console.log(&#39;纬度:&#39;+pos.coords.longitude);  
            console.log(&#39;经度:&#39;+pos.coords.latitude);  
            console.log(&#39;高度:&#39;+pos.coords.altitude);  
            console.log(&#39;速度:&#39;+pos.coords.speed);  
  
        }  
        function errCB(err){  //获取失败的回调函数！！  
            console.log(&#39;获取到定位数据失败&#39;);  
            console.log(err.message);  //输出失败的信息或原因！  
        }  
    }  
</script>  
</body>  
</html>

登入後複製

詳解HTML5地理定位與第三方工具百度地圖的應用

如圖所示，當點擊按鈕時，成功獲取到了定位數據，但是高度和速度由於PC端原因所以為Null，所以我們只要記住一個方法就可以在HTML5中取得到地理定位！

navigator.geolocation.getCurrentPosotion(
function(pos){
console.log(&#39;定位数据获取成功&#39;);
//pos.coords.longtitude ....
},
function(err){
console.log(&#39;定位数据获取失败&#39;);
//err.code   err.message
}
)

登入後複製

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

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

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

使用步驟：

先打開官網http://lbsyun.baidu.com/，然後拉到最下面：

詳解HTML5地理定位與第三方工具百度地圖的應用

可以看到，百度地圖可以用來進行web開發，Android開發，ios開發，這裡我們使用web開發，點選JavaScript API
網址：http://lbsyun.baidu.com/index.php?title=jspopular

#我們可以到API中的許多案例和功能展示，要使用百度地圖，必須先取得金鑰！

詳解HTML5地理定位與第三方工具百度地圖的應用

稍后会解释什么是密钥，先点击进入页面，如果弹出登陆界面的话，则登陆，登陆点击注册开发者账号(由于我已近注册了，所以这里无法给大家演示，需要大家自己操作)，输入相关的手机，邮箱，然后到邮箱里面验证，验证成功后,，点击创建应用，会出现如下界面：

詳解HTML5地理定位與第三方工具百度地圖的應用

应用名称随意填写一个
应用类型选择---浏览器端
Referer白名单：指的是谁可以访问你的应用，通过什么方式访问你的应用，这里填写一个星号' * '，意思是全部人都可以访问，因为只是做测试可以这样做，到以后项目如果使用到，会有相关的加密方式等等！！然后点击提交完成创建！！
完成应用的创建后，出现如下界面：

詳解HTML5地理定位與第三方工具百度地圖的應用

这里会显示刚才创建的应用编号，应用名称，以及最重要的访问应用码，就是前面提到的密钥!

然后得到密钥之后，我们回到主页http://lbsyun.baidu.com/index.php?title=jspopular

点击左侧的开发指南，可以看到相关API的用法以及案例！！，这个API是小编看到的所以API中最良心的，没有一句废话，
写的很详细，通俗易懂，因为实在太多了，就在这里介绍几个主要的用法！！！

詳解HTML5地理定位與第三方工具百度地圖的應用

我们创建一个新的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>  
<h1>使用百度地图</h1>  
<p id="container"></p>  
<script type="text/javascript">  
    // 创建地图实例，避免与Map重名，所以使用BMap.Map  
    var map = new BMap.Map("container");  
    // 创建点坐标  
    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地理定位與第三方工具百度地圖的應用