html5 地理定位
html5 Geolocation API用于獲得用戶的地理位置
鑒于該特性可能侵犯用戶的隱私,除非用戶同意,否則用戶位置信息是不可用的
注意:Geolocation(地理定位)對于擁有GPS的設備,地理定位更加精確
Geolocation API的主要方法是gerCurrentPositon,它用來獲得用戶的位置
下面是一個簡答的地理定位實例,可返回用戶位置的經度和緯度:
var x=document.getElementById("demo");
function getLocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentLocation(showPositon);}
else{
x.innerHTML="該瀏覽器不支持獲取地理位置."}
}
function showPosition(position){
x.innerHTML="緯度:"+position.coords.latitude+
"<br>經度:"+position.coords.longitude;}
實例解析:
●檢測是否支持地理定位
●如果支持,則運行gerCurrentPosition()方法.如果不支持,則向用戶顯示一段信息
●如果getCurrentPostion()運行成功,則向參數showPosition中規定的函數返回一個coordinates對象
●showPosition()函數獲得并顯示經度和緯度
上面的例子是一個非常基礎的地理定位腳本,不含錯誤處理
你需要先熟悉JavaScript才能理解和使用API
如果gerCurrentPosition()運行成功,則getCurrentPosition()方法返回對象.始終返回latitude,longtitude以及accuracy屬性.如果可用,則會返回其他下面的屬性:
●coords.latitude:十進制數的緯度
●coords.longtitude:十進制的經度
●coords.accuracy:位置精度
●coords.altitude:海拔,海平面以上以米計
●coords.altitudeAccuracy:位置的海拔精度
●coords.heading:方向,從正北開始以度計
●coords.speed:速度,以米/每秒計
●timestamp:響應的日期/時間
二 html5 拖放
拖放(Drag和drop)是html5標準的組成部分
拖放是一種常見的特性,即抓取對象以后拖到另一個位置
在html5中,拖放是標準的一部分,任何元素都能夠拖放
★設置元素為可拖放
首先,為了使元素可拖動,需要把draggable屬性設置為true:
<img draggable="true">
★拖動什么-ondragstart和setData()
然后,規定當元素拖動時,會發生什么
dataTransfer.setData()方法,設置被拖數據的數據類型和值:
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);}
在這個例子中,數據類型是"Text",值是可拖動元素的id("drag1")
★放到何處-ondragover
ondragover時間規定在何處放置被拖動的數據
默認地,無法將數據/元素放置到其他元素中,如果需要設置允許放置,我們必須阻止元素的默認處理方式.
這要通過調用ondragover時間的event.preventDefault()方法:
event.preventDefault()
★進行放置-ondrop
當放置被拖數據時,會發生drop事件
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));}
三 html5 SVG
什么是SVG?
●SVG指可伸縮矢量圖形(Scalable Vector Graphics)
●SVG用于定義用于網絡的基于矢量的圖形
●SVG使用XML格式定義圖形
●SVG圖像在放大或改變尺寸的情況下其圖形質量不會損失
●SVG是萬維聯盟的標準
在html5中,你能夠直接將SVG元素嵌入html頁面中
要使用SVG繪制圖形,你首先需要創建一個<svg>標簽
<svg width="1000" height="1000"></svg>
要創建一個圓形,需要添加一個<circle>標簽
下面是SVG代碼:
<svg width="1000" height="1000">
<circle cx="100" cy="50" r="40" fill="red" />
</svg>
●cx和cy屬性定義圓點的x和y坐標.如果省略cx和cy,圓的中心會被設置為(0,0)
●r屬性定義圓的半徑
運行效果如下:
久前研究過 HTML5 Geolocation,最近整理 F2E-Awesome 的時候,發現缺少相關的文章,所以按照自己的使用經驗整理了此篇文章。
一、應用場景:
請求一個位置信息,如果用戶同意,瀏覽器就會返回位置信息,該位置信息是通過支持 HTML5 地理定位功能的底層設備提供給瀏覽器。位置信息由緯度/經度坐標和一些其他的元數據組成。有了這些位置信息就可以構建引人注意目的位置感知類應用程序。
二、簡單示例
我們通過簡短的代碼先粗略認識一下,大致知道如何使用。
三、兼容性
四、相關 API
三個方法:
1.getCurrentPosition
獲取用戶當前定位位置,這會異步地請求獲取用戶位置,并查詢定位硬件來獲取最新信息。
需要注意的是:有 GPS 的設備可能需要一分鐘或更久來獲取 GPS 定位,在這種情況下 getCurrentPosition() 會返回低精度數據(基于 IP 的定位或 Wi-Fi 定位)。
2.watchPosition
您可以設定一個回調函數來響應定位數據發生的變更(設備發生了移動,或獲取到了更高精度的地理位置信息),它與 getCurrentPosition() 接受相同的參數,但回調函數會被調用多次。錯誤回調函數與 getCurrentPosition() 中一樣是可選的,也會被多次調用。
3.clearWatch
watchPosition() 函數會返回一個 ID,唯一地標記該位置監視器。您可以將這個 ID 傳給 clearWatch() 函數來停止監視用戶位置。
navigator.geolocation.clearWatch(watchID);
五、警告
[Deprecation] getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
在 IOS 10 中,蘋果對 webkit 定位權限進行了修改,所有定位請求的頁面必須是 https 協議的。如果是非 https 網頁,在 http 協議下通過 html5 原生定位接口會返回錯誤,也就是無法正常定位到用戶的具體位置,而已經支持 https 的網站則不會受影響。
六、定位原理
1.IP 定位
每一臺連上網路的電腦都具有一個獨一無二的 IP 位址,經由 IP 位址可以反查出電腦位置,但是結果并不精確,而且很容易到受到 ISP 的 IP 分配機制影響,而造成誤差。
2.GPS 定位
GPS 是我們最常聽到的定位技術,它是利用衛星來定位,可以很精確的偵測到使用者位置。但是要玩 GPS,行動裝置一定要有 GPS 模組,而且盡管 GPS 非常精準,還是會有技術上的局限,比如在偵測位置時,GPS 的感應器要位于視線范圍內(line of sight),因此在有很多高樓大廈、或者是障礙物的地方,GPS 反而沒有辦法運作自如。
3.Wi-Fi 三角測量定位
這個定位技術可以說是為都會區而設的,因為熱鬧的大都市通常會有不少 Wi-Fi 熱點,定位供應商可以根據這些熱點的相對位置、距離等建立一個資料庫。Wi-Fi 三角測量適用于 GPS 無法滲透的地方,不過缺點是需要經常更新資料庫。
4.基地臺三角測量定位
借助基地臺之間的相對位置,可以定位出用戶在哪里,只要你的手機收得到訊號,就能定位。 一般來說,這四種技術的準確性由高而低分別是:GPS 定位、Wi-Fi 三角測量、基地臺三角測量、IP定位。但還是要視環境而定,比如你到沒有 Wi-Fi 熱點的地方、或是手機信號不好,定位效果當然也會受影響。
位用戶的位置
HTML5 Geolocation API 用于獲得用戶的地理位置。
鑒于該特性可能侵犯用戶的隱私,除非用戶同意,否則用戶位置信息是不可用的。
瀏覽器支持
Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation(地理定位).
注意:Geolocation(地理定位)對于擁有 GPS 的設備,比如 iPhone,地理定位更加精確
HTML5 - 使用地理定位
請使用 getCurrentPosition() 方法來獲得用戶的位置。
下例是一個簡單的地理定位實例,可返回用戶位置的經度和緯度
實例
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else{x.innerHTML="該瀏覽器不支持獲取地理位置。";}
}
function showPosition(position)
{
x.innerHTML="緯度: " + position.coords.latitude +
"<br>經度: " + position.coords.longitude;
}
</script>
*請認真填寫需求信息,我們會在24小時內與您取得聯系。