溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“HTML5怎么實現Javascript API擴展”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“HTML5怎么實現Javascript API擴展”吧!
現在比較火的一類服務稱為基于位置的服務（基于位置的服務，LBS），這一類服務就是企業利用某點（例如用戶所在的位置）相關服務。在HTML5中，加入了新的地理位置API用來確定和分享地理位置。
隱私申明
在與遠程的Web服務器共享物理位置時，隱私是一個需要關注的問題。因此，地理位置API會要求用戶先提供權限，然后Web應用程序才能訪問位置信息。首次訪問請求定位數據的網頁時，瀏覽器將顯示一個通知欄，提示提供對用戶位置的訪問權限。按照瀏覽器的提示，選擇相關的授權即可。
如果用戶未授予權限，則不會向網絡應用程序提供位置信息。調用相關API不會觸發成功回調。
檢查瀏覽器的請立即獲取iTunes情況
地理位置API在主流的瀏覽器的最新版中都支持了如果地理位置API不可用，則window.navigator.geolocation將為null，如下所示：
復制代碼代碼如下： www.mb5u.com
函數show_islocationenabled（）
{
var str =“否，不支持地理定位。”;
if（window.navigator.geolocation）{
str =“是，支持地理定位。”;
}
alert（str）;
}
Geolocation API基于導航器這一目標對象的一個新屬性：navigator.geolocation，該對象提供了一些有關訪問者的瀏覽器和系統的有用信息。是GPS等。使用不同的方式獲取到的地理位置信息精度也是不一樣的，通常情況下，通過GPS獲得的最高準確度（移動平臺上使用GPS最多，PC平臺上基本都是靠網絡數據）。偶然情況下，在一些位置上，你有可能無法獲得明確的位置讀數或一點數據都接收不到。定位
當前位置
使用navigator.geolocation的getCurrentPosition（）方法獲取用戶的當前位置，這個方法只獲取一次位置的信息。當該方法被腳本調用時，方法以異步的方式來嘗試獲取托管設備的當前位置。
復制代碼代碼如下： www.mb5u.com
方法簽名：getCurrentPosition（geolocationSuccessCallback，[geolocationErrorCallback，geolocationOptions]）;
1. geolocationSuccessCallback：獲取當前位置成功后的替代（必需的）
。2. geolocationErrorCallback。有錯誤發生時使用的任選（可選）
。3. geolocationOptions。地理位置選項（任選的）
處理位置信息
getCurrentPositon（）方法獲得當前位置成功后重新定位位置信息保存到一個位置對象中，然后把這個對象作為參數來執行geolocationSuccessCallback這一步驟。的信息。
位置對象有兩個屬性：時間戳和coords.timestamp屬性表示地理位置數據的創建時間，COORDS屬性表示地理位置信息，又包含七個屬性：
復制代碼代碼如下： www.mb5u.com
。coords.latitude：估計緯度
。coords.longitude：估計經度
。coords.altitude：估計高度
。coords.accuracy：所提供的以米為單位的經度和緯度估計的精確度
。coords.altitudeAccuracy：所提供的以米為單位的高度估計的精確度
。coords.heading：主機設備當前移動的角度方向，相對于正北方向順時針計算
。coords.speed：以米每秒為單位的設備的當前對地速度
一般的，這些屬性中有三項是保證有的：coords.latitude，coords.longitude和coords.accuracy，其余的返回null；這取決于設備的能力和其所采用的定位服務器。而且，heading和速度屬性可以基于用戶之前的位置計算出來。
處理錯誤
執行getCurrentPositon（）方法時如果有錯誤發生的話，則該方法傳遞一個PositionError對象給geolocationErrorCallback回調。
設置地理位置選項對話
你可以設置geolocationOptions的三個屬性：
復制代碼代碼如下： www.mb5u.com
enableHighAccuracy：如果設備支持高級的話，這個選項表示是否啟用高精度。timeout
：查詢超時時間
maximumAge：緩存的位置最大的時間數，在這一時間段內緩存可被使用。
看下面完整的例子：
復制代碼代碼如下： www.mb5u.com
<！DOCTYPE html>
<html>
<body>
<p id =“ demo”>單擊按鈕獲取位置：</ p>
<button onclick =“ getLocation（）”>嘗試</ button>
<div id =“ mapholder”> </ div>
<script>
var x = document.getElementById（“ demo”）;
函數getLocation（）{
如果（navigator.geolocation）{
navigator.geolocation.getCurrentPosition（showPosition，showError）;
}
else {
x.innerHTML =“此瀏覽器不支持地理位置。”;
}
}
函數showPosition（position）{
var latlon = position.coords.latitude +“，” + position.coords.longitude;
var img_url =“ http：
latlon +“＆zoom = 9＆size = 400x300＆sensor = false”;
document.getElementById（“ mapholder”）。innerHTML =“ <img src ='” + img_url +“'/>”;
}
函數showError（error）{
switch（error.code）{
case error.PERMISSION_DENIED：
x.innerHTML =“用戶拒絕了地理位置定位請求。”
休息;
case error.POSITION_UNAVAILABLE：
x.innerHTML =“位置信息不可用。”
休息;
大小寫錯誤。TIMEOUT：
x.innerHTML =“獲取用戶位置的請求超時。”
休息;
大小寫錯誤。UNKNOWN_ERROR：
x.innerHTML =“發生未知錯誤。”
休息;
}
}
<
這個例子獲取到當前設備所在位置的位置并顯示到Google地圖中。當然你可以使用百度地圖API中的靜態圖版來改造這個例子。百度地圖API后面后面的實用參考中的鏈接。
開啟/取消持續定位
使用navigator.geolocation的watchPosition（）方法可以定期更改用戶的位置，查看用戶的位置是否發生改變。這個方法有三個參數：這三個參數和getCurrentPosition（）方法一樣，一個成功后的情況，一個失敗后的一部分，和一個獲取位置信息的選項；這個方法有一個返回值watchID，用于取消持續定位。
使用navigator.geolocation的clearWatch（）方法可以終止插入的watchPosition（），該方法只帶一個參數watchID。
看下面的例子：
復制代碼代碼如下： www.mb5u.com
<！DOCTYPE html>
<html>
<head>
<title>地理位置API示例：偵聽位置更新</ title>
<meta http-equiv =“ X-UA-Compatible” content =“ IE = 9” />
<腳本type =“ text / javascript”>
函數setText（val，e）{
document.getElementById（e）.value = val;
}
var nav = null;
var watchID;
函數listenForPositionUpdates（）{
如果（nav == null）{
nav = window.navigator;
}
if（nav！= null）{
var geoloc = nav.geolocation;
如果（geoloc！= null）{
watchID = geoloc.watchPosition（successCallback）;
}
else {
alert（“
否則{
alert（“未找到導航器”）;
}
}
函數clearWatch（watchID）{
window.navigator.geolocation.clearWatch（watchID）;
}
函數successCallback（position）
{
setText（position.coords.latitude，“ latitude”）;
setText（position.coords.longitude，“經度”）;
}
</ script>
</ head>
<body>
<label for =“ latitude”>緯度：</ label> <input id =“ latitude” />
<label for =“ longitude”>經度：</ label> <輸入id =“ longitude” />
<input type =“ button” value =“監視緯度和經度” onclick =“
</ html>
到此，相信大家對“HTML5怎么實現Javascript API擴展”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
