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>