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 的時候，發現缺少相關的文章，所以按照自己的使用經驗整理了此篇文章。

一、應用場景：

附近商家定位；計算行走路程；GPS 導航；

請求一個位置信息，如果用戶同意，瀏覽器就會返回位置信息，該位置信息是通過支持 HTML5 地理定位功能的底層設備提供給瀏覽器。位置信息由緯度／經度坐標和一些其他的元數據組成。有了這些位置信息就可以構建引人注意目的位置感知類應用程序。

二、簡單示例

我們通過簡短的代碼先粗略認識一下，大致知道如何使用。

三、兼容性

四、相關 API

兩種類型的定位請求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 的網站則不會受影響。

經測試，本地 file 文件或者是啟動服務器，都會直接返回拒絕服務。

六、定位原理

那么瀏覽器是如何實現定位的呢，原理又是如何？

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>