溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
本文將為大家詳細(xì)介紹“HTML5中Geolocation API有什么用”，內(nèi)容步驟清晰詳細(xì)，細(xì)節(jié)處理妥當(dāng)，而小編每天都會(huì)更新不同的知識(shí)點(diǎn)，希望這篇“HTML5中Geolocation API有什么用”能夠給你意想不到的收獲，請(qǐng)大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識(shí)吧。
html的全稱(chēng)為超文本標(biāo)記語(yǔ)言，它是一種標(biāo)記語(yǔ)言，包含了一系列標(biāo)簽．通過(guò)這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說(shuō)明文字，圖形、動(dòng)畫(huà)、聲音、表格、鏈接等，主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁(yè)。
HTML5 Geolocation API 用于獲得用戶(hù)的地理位置。鑒于該特性可能侵犯用戶(hù)的隱私，除非用戶(hù)同意，否則用戶(hù)位置信息是不可用的。
一 基于瀏覽器的HTML5查找地理位置
html5中的GPS定位功能封裝在 navigator.geolocation 屬性里,有三種方法:
(1) getCurrentPosition 只獲取一次用戶(hù)的位置
(2) watchPosition 返回用戶(hù)的當(dāng)前位置，并繼續(xù)返回用戶(hù)移動(dòng)時(shí)的更新位置（就像汽車(chē)上的 GPS）。
(3) clearWatch() - 停止 watchPosition() 方法
二 getCurrentPosition和 watchPosition方法使用格式是
getCurrentPosition(successCallback,errorCallback,positionOptions)和watchPosition(successCallback,errorCallback,positionOptions)
(1)successCallback表示調(diào)用函數(shù)成功以后的回調(diào)函數(shù)，該函數(shù)帶有一個(gè)參數(shù)，對(duì)象字面量格式，表示獲取到的用戶(hù)位置數(shù)據(jù)。
(2)errorCallback表示返回的錯(cuò)誤代碼。它包含以下兩個(gè)屬性：
1、message：錯(cuò)誤信息 2、 code：錯(cuò)誤代碼。 其中code錯(cuò)誤代碼包括以下四個(gè)值： 1 位置服務(wù)被拒絕 2 暫時(shí)獲取不到位置信息 3 獲取信息超時(shí) 4 未知錯(cuò)誤
(3)positionOptions數(shù)據(jù)格式為JSON，有三個(gè)可選的屬性：
1、enableHighAcuracy — 布爾值： 表示是否啟用高精確度模式，如果啟用這種模式，瀏覽器在獲取位置信息時(shí)可能需要耗費(fèi)更多的時(shí)間。 2、timeout — 整數(shù)： 表示瀏覽需要在指定的時(shí)間內(nèi)獲取位置信息，否則觸發(fā)errorCallback。 3、maximumAge — 整數(shù)/常量： 表示瀏覽器重新獲取位置信息的時(shí)間間隔。
下面來(lái)看一下測(cè)試?yán)?(注意要開(kāi)啟定位后才可以看效果)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>基于瀏覽器的HTML5查找地理位置</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script>
var options={
enableHighAccuracy:true, //高精度定位參數(shù)
maximumAge:1000
}
function getLocation(){
if(navigator.geolocation){
//瀏覽器支持geolocation
navigator.geolocation.getCurrentPosition(onSuccess,onError,options); //getCurrentPosition 只獲取一次用戶(hù)的地理位置函數(shù)
//onSuccess成功返回的回調(diào)函數(shù)(必選),onError失敗返回的回調(diào)函數(shù)(可選),設(shè)置精確度等參數(shù)(可選options)
//navigator.geolocation.watchPosition(onSuccess,onError,options); //watchPosition 繼續(xù)獲取用戶(hù)的位置,適合于導(dǎo)航
//onSuccess成功返回的回調(diào)函數(shù)(必選),onError失敗返回的回調(diào)函數(shù)(可選),設(shè)置精確度等參數(shù)(可選options)
}else{
//瀏覽器不支持geolocation
alert ('您的瀏覽器暫不支持定位');
}
}
//成功時(shí)
function onSuccess(position){
//返回用戶(hù)位置
//經(jīng)度
var longitude =position.coords.longitude;
//緯度
var latitude = position.coords.latitude;
//精確度
var accuracy = position.coords.accuracy;
//高度精確度
var altitudeAccuracy = position.coords.altitudeAccuracy;
//設(shè)備正北順時(shí)針前進(jìn)的方位
var heading = position.coords.heading;
//設(shè)備外部環(huán)境的移動(dòng)速度(m/s)
var speed = position.coords.speed;
//當(dāng)位置捕獲到時(shí)的時(shí)間戳
var timestamp = position.timestamp;
document.getElementById("container").innerHTML= "您的經(jīng)度是="+longitude+'<br>'
+"您的緯度是="+latitude+'<br>'+"您的精確度是="+accuracy+'<br>'
+"您的高度精確度是="+altitudeAccuracy+'<br>'+"您的設(shè)備正北順時(shí)針前進(jìn)的方位是="+heading+'<br>'
+"您的設(shè)備外部環(huán)境的移動(dòng)速度(m/s)是="+speed+'<br>'+"您的當(dāng)位置捕獲到時(shí)的時(shí)間戳是="+timestamp+'<br>';
}
//失敗時(shí)
function onError(error){
switch(error.code){
case 1:alert("位置服務(wù)被拒絕");break;
case 2:alert("暫時(shí)獲取不到位置信息");break;
case 3:alert("獲取信息超時(shí)");break;
case 4:alert("未知錯(cuò)誤");break;
}
}
window.onload=getLocation;
</script>
</head>
<body>
<p id="container" style="300px;height: 300px"></p>
</body>
</html>上面代碼最好用手機(jī)測(cè)試,因?yàn)楣雀铻g覽器因?yàn)楸粐?guó)內(nèi)封的緣故,定位嘛,你們懂得
二 HTML5 geolocation調(diào)用百度地圖api
百度地圖的手冊(cè)地址: developer.baidu.com/map/jsdemo-mobile.htm#i7_1
事先說(shuō)明,html5不是精確定位,所以在地圖上查看效果時(shí)總有幾百米的誤差
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>基于瀏覽器的HTML5查找地理位置和調(diào)取百度地圖api</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- 百度API -->
<script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script>
<script>
var options={
enableHighAccuracy:true, //高精度定位參數(shù)
maximumAge:1000
}
function getLocation(){
if(navigator.geolocation){
//瀏覽器支持geolocation
navigator.geolocation.getCurrentPosition(onSuccess,onError,options); //getCurrentPosition 只獲取一次用戶(hù)的地理位置函數(shù)
//onSuccess成功返回的回調(diào)函數(shù)(必選),onError失敗返回的回調(diào)函數(shù)(可選),設(shè)置精確度等參數(shù)(可選options)
//navigator.geolocation.watchPosition(onSuccess,onError,options); //watchPosition 繼續(xù)獲取用戶(hù)的位置,適合于導(dǎo)航
//onSuccess成功返回的回調(diào)函數(shù)(必選),onError失敗返回的回調(diào)函數(shù)(可選),設(shè)置精確度等參數(shù)(可選options)
}else{
//瀏覽器不支持geolocation
alert ('您的瀏覽器暫不支持定位');
}
}
//成功時(shí)
function onSuccess(position){
//返回用戶(hù)位置
//經(jīng)度
var longitude =position.coords.longitude;
//緯度
var latitude = position.coords.latitude;
//使用百度地圖API
//創(chuàng)建地圖實(shí)例
var map =new BMap.Map("container");
//創(chuàng)建一個(gè)坐標(biāo)
var point =new BMap.Point(longitude,latitude);
//地圖初始化，設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
map.centerAndZoom(point,15);
map.addOverlay(new BMap.Marker(point)); //在地圖上你的位置顯示紅色點(diǎn)點(diǎn)
}
//失敗時(shí)
function onError(error){
switch(error.code){
case 1:alert("位置服務(wù)被拒絕");break;
case 2:alert("暫時(shí)獲取不到位置信息");break;
case 3:alert("獲取信息超時(shí)");break;
case 4:alert("未知錯(cuò)誤");break;
}
}
window.onload=getLocation;
</script>
</head>
<body>
<p id="container" style="300px;height: 300px"></p>
</body>
</html>如果你能讀到這里，小編希望你對(duì)“HTML5中Geolocation API有什么用”這一關(guān)鍵問(wèn)題有了從實(shí)踐層面最深刻的體會(huì)，具體使用情況還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼