這篇文章主要為大家詳細介紹了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('成功获取到定位数据');
console.log('纬度:'+pos.coords.longitude);
console.log('经度:'+pos.coords.latitude);
console.log('高度:'+pos.coords.altitude);
console.log('速度:'+pos.coords.speed);
}
function errCB(err){ //获取失败的回调函数！！
console.log('获取到定位数据失败');
console.log(err.message); //输出失败的信息或原因！
}
}
</script>
</body>
</html>
如圖所示，當點擊按鈕時，成功獲取到了定位數據，但是高度和速度由於PC端原因所以為Null，所以我們只要記住一個方法就可以在HTML5中取得到地理定位！
navigator.geolocation.getCurrentPosotion(
function(pos){
console.log('定位数据获取成功');
//pos.coords.longtitude ....
},
function(err){
console.log('定位数据获取失败');
//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 id="使用百度地图">使用百度地图</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>使用百度地图：
OK，我们成功的在HTML文件中使用了百度地图，现在可以像在http://www.php.cn/中一样使用百度地图了！！
相关函数说明：
<script src="http://api.map.baidu.com/api?v=2.0&ak=您的网站在百度地图申请的访问秘钥 "> </script>
在ak中输入刚才得到那一长串密钥即可引用百度地图！！
创建地图实例 --必选。
var map = new BMap.Map("container");
创建一个指定的点 ，你的经纬度信息！！如果不知道可以使用前面的
navigator.geolocation.getCurrentPosotion方法来得到经纬度--必选。
var point = new BMap.Point(116.300982,39.915907);
以指定点为中心显示地图 数字17指的是层级，层级可以分为1~18级，层级越小地图看的范围越大，层级越大看的范围越大，自己可以测试一下不同层级显示的地图效果！！---必选。
map.centerAndZoom(point, 17);
地图可以随着鼠标自由的缩放---可选。
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));
OK，第三方百度地图就说到这里，还有许多好玩的函数可以自己使用，所以方法和参数都在API中可以找到！
以上是詳解HTML5地理定位與第三方工具百度地圖的應用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
了解H5代碼：HTML5的基本原理Apr 17, 2025 am 12:08 AMHTML5是構建現代網頁的關鍵技術，提供了許多新元素和功能。 1.HTML5引入了語義化元素如、、等，增強了網頁結構和SEO。 2.支持多媒體元素和，無需插件即可嵌入媒體。 3.表單增強了新輸入類型和驗證屬性，簡化了驗證過程。 4.提供了離線和本地存儲功能，提升了網頁性能和用戶體驗。
H5代碼：Web開發人員的最佳實踐Apr 16, 2025 am 12:14 AMH5代碼的最佳實踐包括：1.使用正確的DOCTYPE聲明和字符編碼；2.採用語義化標籤；3.減少HTTP請求；4.使用異步加載；5.優化圖像。這些實踐能提升網頁的效率、可維護性和用戶體驗。
H5：網絡標準和技術的發展Apr 15, 2025 am 12:12 AMWeb标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显著的发展。1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。2)CSS3增加了动画和过渡功能，使页面效果更加丰富。3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。
H5是HTML5的速記嗎？探索細節Apr 14, 2025 am 12:05 AMH5不僅僅是HTML5的簡稱，它代表了一個更廣泛的現代網頁開發技術生態：1.H5包括HTML5、CSS3、JavaScript及相關API和技術；2.它提供更豐富、互動、流暢的用戶體驗，能在多設備上無縫運行；3.使用H5技術棧可以創建響應式網頁和復雜交互功能。
H5和HTML5：網絡開發中常用的術語Apr 13, 2025 am 12:01 AMH5與HTML5指的是同一個東西，即HTML5。 HTML5是HTML的第五個版本，帶來了語義化標籤、多媒體支持、畫布與圖形、離線存儲與本地存儲等新功能，提升了網頁的表現力和交互性。
H5指的是什麼？探索上下文Apr 12, 2025 am 12:03 AMH5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo
H5：工具，框架和最佳實踐Apr 11, 2025 am 12:11 AMH5開發需要掌握的工具和框架包括Vue.js、React和Webpack。 1.Vue.js適用於構建用戶界面，支持組件化開發。 2.React通過虛擬DOM優化頁面渲染，適合複雜應用。 3.Webpack用於模塊打包，優化資源加載。
HTML5的遺產：當前了解H5Apr 10, 2025 am 09:28 AMHTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
Atom編輯器mac版下載
最受歡迎的的開源編輯器
PhpStorm Mac 版本
最新（2018.2.1 ）專業的PHP整合開發工具
禪工作室 13.0.1
強大的PHP整合開發環境
WebStorm Mac版
好用的JavaScript開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
