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

這篇文章主要為大家詳細介紹了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看看定位資訊！

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

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>

登入後複製

如圖所示，當點擊按鈕時，成功獲取到了定位數據，但是高度和速度由於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/，然後拉到最下面：

可以看到，百度地圖可以用來進行web開發，Android開發，ios開發，這裡我們使用web開發，點選JavaScript API

網址：http://lbsyun.baidu.com/index.php? title=jspopular
我們可以到API中的許多案例和功能展示，要使用百度地圖，必須先取得金鑰！

稍後會解釋什麼是密鑰，先點擊進入頁面，如果彈出登陸介面的話，則登陸，登陸點擊註冊開發者帳號(由於我已近註冊了，所以這裡無法給大家演示，需要大家自己操作)，輸入相關的手機，郵箱，然後到郵箱裡面驗證，驗證成功後,，點擊創建應用，會出現如下界面：

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

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

然后得到密钥之后，我们回到主页http://lbsyun.baidu.com/index.php?title=jspopular
点击左侧的开发指南，可以看到相关API的用法以及案例！！，这个API是小编看到的所以API中最良心的，没有一句废话，
写的很详细，通俗易懂，因为实在太多了，就在这里介绍几个主要的用法！！！

我们创建一个新的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>

登入後複製

使用百度地图：