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