html5获取地理位置信息4种方式详解
2017-12-28 20:31
393 查看
HTML5怎样获取地理信息,如html5怎样获取ip地址,怎样实现gps导航定位,wifi基站的mac地址服务等,这些在HTML5中已经都已经有API实现了,用户可以轻松使用html5技术进行操作,下面详细为大家介绍HTML5操作地理信息。
1、HTML5中ip地址
其实在中国IP地址还是比较准确,书上说不准确,很多时候获取的是ISP机房的位置,但是获取非常方便,没有什么限制。但是实际上我觉得在中国,ip地址还是比较准确的,基本上上能精确到小区或大楼的标准。
2、HTML5中GPS定位操作
GPS定位非常准确,但是需要在户外,且需要很长时间搜索卫星。但前提就是硬件设备要支持GPS。最主要的很多设备比如笔记本电脑基本都是不带GPS的,新的智能手机purse
hanger倒是都有。
3、WiFi基站的mac地址。
(猜测是连接位置已知的公共WiFi的时候,通过Mac地址识别WiFi接入点,从而定位)
这种定位的精度还是很不错的,而且还可以在室内定位。不过由于这种位置公开的wifi比较少,此种方法的适用范围比较少。
4、 GSM或CDMA基站
通过基站定位,精度随基站密度变化,精度一般,还是只有手机能用。看来地理位置API还是手机上比较有实用性。
5、用户指定位置
晕,这个就不是HTML5的范畴了。
地理位置获取流程步骤:
1、用户打开需要获取地理位置的web应用。
2、应用向浏览器请求地理位置,浏览器弹出询问窗口,询问用户是否共享地理位置。
3、假设用户允许,浏览器从设别查询相关信息。
4、浏览器将相关信息发送到一个信任的位置服务器,服务器返回具体的地理位置。
检测浏览器支持:
JavaScript Code 检测是否支持
function loadDemo() {
if(navigator.geolocation) {
document.getElementById(“support”).innerHTML = “HTML5 Geolocation supported.”;
} else {
document.getElementById(“support”).innerHTML = “HTML5 Geolocation is not supported in
your browser.”;
}
}
位置请求方式:
单次请求
JavaScript Code
navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError, options);
回调函数updateLocation接受一个对象参数,表示当前的地理位置,它有如下属性:
latitude——纬度
longitude——精度
accuracy——精确度,单位米
altitude——高度,单位米
altitudeAccuracy——高度的精确地,单位米
heading—运动的方向,相对于正北方向的角度
speed——运动的速度(假设你在地平线上运动),单位米/秒
回调函数handleLocationError接受错误对象,error.code是如下错误号。
UNKNOWN_ERROR (error code 0) —— 错误不在如下三种之内,你可以使用error.message获取错误详细信息。
PERMISSION_DENIED (error code 1)—— 用不选择不共享地理位置
POSITION_UNAVAILABLE
(error code 2) ——无法获取当前位置
TIMEOUT (error code 3) ——在指定时间无法获取位置会触发此错误。
第三个参数options是可选参数,属性如下:
enableHighAccuracy——指示浏览器获取高精度的位置,默认为false。当开启后,可能没有任何影响,也可能使浏览器花费更长的时间获取更精确的位置数据。
timeout——指定获取地理位置的超时时间,默认不限时。单位为毫秒。
maximumAge——最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置。默认为0,表示浏览器需要立刻重新计算位置。
参数使用的例子如下:wedding veil
JavaScript Code
navigator.geolocation.getCurrentPosition(updateLocation,handleLocationError,
{timeout:10000});
重复请求
navigator.geolocation.watchPosition(updateLocation, handleLocationError);
使用 watchPosition可以持续获取地理位置,浏览器或多次调用updateLocation函数以便传递最新的位置。该函数返回一个 watchID,使用navigator.geolocation.clearWatch(watchId)可以清除此次回调,使用不带参数的 navigator.geolocation.clearWatch()清除说有watchPosition。
地址转换:
由于地理位置API返回的是经纬度,如果要计算两个位置之间的距离,可以使用著名的Haversine公式计算两个坐标在地平线上的距离。
Listing 4-7. A JavaScript Haversine implementation
JavaScript Code复制内容到剪贴板
function toRadians(degree) {
return degree * Math.PI / 180;
}
function distance(latitude1, longitude1, latitude2, longitude2) {
// R is the radius of the earth in kilometers
var R = 6371;
var deltaLatitude = toRadians(latitude2-latitude1);
var deltaLongitude = toRadians(longitude2-longitude1);
latitude1 =toRadians(latitude1);
latitude2 =toRadians(latitude2);
var a = Math.sin(deltaLatitude/2) *
Math.sin(deltaLatitude/2) +
Math.cos(latitude1) *
Math.cos(latitude2) *
Math.sin(deltaLongitude/2) *
Math.sin(deltaLongitude/2);
var c = 2 * Math.atan2(Math.sqrt(a),
Math.sqrt(1-a));
var d = R * c;
return d;
}
以上是为大家讲解HTML5中基本的操作地理信息,如怎样获取ip,mac地址,gps定位等操作,主要是基本的讲解与了解供大家参考学习。
在 HTML5 中,当请求一个位置信息时,如果用户同意,浏览器就会返回位置信息,该位置信息是通过支持地理定位功能的底层设备(比如笔记本电脑或手机)提供给浏览器的。位置信息由纬度、经度坐标和一些其他元数据组成。例如北京故宫的位置信息主要由一对纬度和经度坐标组成:纬度:北纬 39.9,经度:东经 116.4。
经纬度坐标有两种表示方式:十进制格式(例如 39.9)和 DMS(Degree Minute Second,角度)格式(例如 39 ° 54 ′ 20 ″)。HTML5 Geolocation API 返回的坐标格式为十进制格式。除了纬度和经度坐标,HTML5 Geolocation 还提供位置坐标的准确度。除此之外,它还会提供其他一些元数据,比如海拔、海拔准确度、行驶方向和速度等,具体情况取决于浏览器所在的硬件设备。
位置信息一般从如下数据源获得:
IP 地址
三维坐标
GPS(Global Positioning System,全球定位系统)
Wi-Fi
手机信号
用户自定义数据
它们各有优缺点如表 1 所示,为了保证更高的准确度,许多设备使用多个数据源组合的方式。
表 1. 位置信息获取方式对比
回页首
各浏览器对 HTML5 Geolocation 的支持程度不同,并且还在不断更新中。好消息是:在 HTML5 的所有功能中,HTML5 Geolocation 是第一批被全部接受和实现的功能之一,相关规范已经达到一个非常成熟的阶段,不大可能做太大改变。如表 2 所示,很多浏览器已经支持 HTML5 Geolocation:
表 2. 浏览器对 HTML5 Geolocation 的支持情况
由于浏览器对它的支持程度不同,在使用之前最好先检查浏览器是否支持 HTML5 Geolocation API。后面将讲解如何检查浏览器是否支持此功能。本文中所有示例程序都在 Firefox 12.0 上运行测试成功。
1、HTML5中ip地址
其实在中国IP地址还是比较准确,书上说不准确,很多时候获取的是ISP机房的位置,但是获取非常方便,没有什么限制。但是实际上我觉得在中国,ip地址还是比较准确的,基本上上能精确到小区或大楼的标准。
2、HTML5中GPS定位操作
GPS定位非常准确,但是需要在户外,且需要很长时间搜索卫星。但前提就是硬件设备要支持GPS。最主要的很多设备比如笔记本电脑基本都是不带GPS的,新的智能手机purse
hanger倒是都有。
3、WiFi基站的mac地址。
(猜测是连接位置已知的公共WiFi的时候,通过Mac地址识别WiFi接入点,从而定位)
这种定位的精度还是很不错的,而且还可以在室内定位。不过由于这种位置公开的wifi比较少,此种方法的适用范围比较少。
4、 GSM或CDMA基站
通过基站定位,精度随基站密度变化,精度一般,还是只有手机能用。看来地理位置API还是手机上比较有实用性。
5、用户指定位置
晕,这个就不是HTML5的范畴了。
地理位置获取流程步骤:
1、用户打开需要获取地理位置的web应用。
2、应用向浏览器请求地理位置,浏览器弹出询问窗口,询问用户是否共享地理位置。
3、假设用户允许,浏览器从设别查询相关信息。
4、浏览器将相关信息发送到一个信任的位置服务器,服务器返回具体的地理位置。
检测浏览器支持:
JavaScript Code 检测是否支持
function loadDemo() {
if(navigator.geolocation) {
document.getElementById(“support”).innerHTML = “HTML5 Geolocation supported.”;
} else {
document.getElementById(“support”).innerHTML = “HTML5 Geolocation is not supported in
your browser.”;
}
}
位置请求方式:
单次请求
JavaScript Code
navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError, options);
回调函数updateLocation接受一个对象参数,表示当前的地理位置,它有如下属性:
latitude——纬度
longitude——精度
accuracy——精确度,单位米
altitude——高度,单位米
altitudeAccuracy——高度的精确地,单位米
heading—运动的方向,相对于正北方向的角度
speed——运动的速度(假设你在地平线上运动),单位米/秒
回调函数handleLocationError接受错误对象,error.code是如下错误号。
UNKNOWN_ERROR (error code 0) —— 错误不在如下三种之内,你可以使用error.message获取错误详细信息。
PERMISSION_DENIED (error code 1)—— 用不选择不共享地理位置
POSITION_UNAVAILABLE
(error code 2) ——无法获取当前位置
TIMEOUT (error code 3) ——在指定时间无法获取位置会触发此错误。
第三个参数options是可选参数,属性如下:
enableHighAccuracy——指示浏览器获取高精度的位置,默认为false。当开启后,可能没有任何影响,也可能使浏览器花费更长的时间获取更精确的位置数据。
timeout——指定获取地理位置的超时时间,默认不限时。单位为毫秒。
maximumAge——最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置。默认为0,表示浏览器需要立刻重新计算位置。
参数使用的例子如下:wedding veil
JavaScript Code
navigator.geolocation.getCurrentPosition(updateLocation,handleLocationError,
{timeout:10000});
重复请求
navigator.geolocation.watchPosition(updateLocation, handleLocationError);
使用 watchPosition可以持续获取地理位置,浏览器或多次调用updateLocation函数以便传递最新的位置。该函数返回一个 watchID,使用navigator.geolocation.clearWatch(watchId)可以清除此次回调,使用不带参数的 navigator.geolocation.clearWatch()清除说有watchPosition。
地址转换:
由于地理位置API返回的是经纬度,如果要计算两个位置之间的距离,可以使用著名的Haversine公式计算两个坐标在地平线上的距离。
Listing 4-7. A JavaScript Haversine implementation
JavaScript Code复制内容到剪贴板
function toRadians(degree) {
return degree * Math.PI / 180;
}
function distance(latitude1, longitude1, latitude2, longitude2) {
// R is the radius of the earth in kilometers
var R = 6371;
var deltaLatitude = toRadians(latitude2-latitude1);
var deltaLongitude = toRadians(longitude2-longitude1);
latitude1 =toRadians(latitude1);
latitude2 =toRadians(latitude2);
var a = Math.sin(deltaLatitude/2) *
Math.sin(deltaLatitude/2) +
Math.cos(latitude1) *
Math.cos(latitude2) *
Math.sin(deltaLongitude/2) *
Math.sin(deltaLongitude/2);
var c = 2 * Math.atan2(Math.sqrt(a),
Math.sqrt(1-a));
var d = R * c;
return d;
}
以上是为大家讲解HTML5中基本的操作地理信息,如怎样获取ip,mac地址,gps定位等操作,主要是基本的讲解与了解供大家参考学习。
位置信息
在 HTML5 中,当请求一个位置信息时,如果用户同意,浏览器就会返回位置信息,该位置信息是通过支持地理定位功能的底层设备(比如笔记本电脑或手机)提供给浏览器的。位置信息由纬度、经度坐标和一些其他元数据组成。例如北京故宫的位置信息主要由一对纬度和经度坐标组成:纬度:北纬 39.9,经度:东经 116.4。经纬度坐标有两种表示方式:十进制格式(例如 39.9)和 DMS(Degree Minute Second,角度)格式(例如 39 ° 54 ′ 20 ″)。HTML5 Geolocation API 返回的坐标格式为十进制格式。除了纬度和经度坐标,HTML5 Geolocation 还提供位置坐标的准确度。除此之外,它还会提供其他一些元数据,比如海拔、海拔准确度、行驶方向和速度等,具体情况取决于浏览器所在的硬件设备。
位置信息一般从如下数据源获得:
IP 地址
三维坐标
GPS(Global Positioning System,全球定位系统)
Wi-Fi
手机信号
用户自定义数据
它们各有优缺点如表 1 所示,为了保证更高的准确度,许多设备使用多个数据源组合的方式。
表 1. 位置信息获取方式对比
数据源 | 优点 | 缺点 |
---|---|---|
IP 地址 | 任何地方都可用 在服务器端处理 | 不精确(经常出错,一般精确到城市级) 运算代价大 |
GPS | 很精确 | 定位时间长,耗电量大 室内效果差 需要额外硬件设备支持 |
Wi-Fi | 精确 可在室内使用 简单、快捷 | 在乡村这些 Wi-Fi 接入点少的地区无法使用 |
手机信号 | 相当准确 可在室内使用 简单、快捷 | 需要能够访问手机或其 modem 设备 |
用户自定义 | 可获得比程序定位服务更准确的位置数据 用户自行输入可能比自动检测更快 | 可能很不准确,特别是当用户位置变更后 |
浏览器支持情况
各浏览器对 HTML5 Geolocation 的支持程度不同,并且还在不断更新中。好消息是:在 HTML5 的所有功能中,HTML5 Geolocation 是第一批被全部接受和实现的功能之一,相关规范已经达到一个非常成熟的阶段,不大可能做太大改变。如表 2 所示,很多浏览器已经支持 HTML5 Geolocation:表 2. 浏览器对 HTML5 Geolocation 的支持情况
浏览器 | 支持情况 |
---|---|
Firefox | 3.5 及以上版本支持 |
Chrome | 在带有 Gears 的第 2 版 Chrome 中被支持 |
Internet Explorer | 通过 Gears 插件支持 |
Opera | 在版本 10 中支持 |
Safari | 在版本 4 中支持以实现在 iPhone 上可用 |
相关文章推荐
- html5获取地理位置信息4种方式详解
- 演示:HTML5获取地理位置定位信息
- HTML5实现获取地理位置信息并定位功能
- js+html5获取用户地理位置信息并在Google地图上显示的方法
- AngularJS进阶(二十)HTML5实现获取地理位置信息并定位功能
- Html5 Geolocation获取地理位置信息
- html5获取地理位置信息
- AngularJS进阶(二十)HTML5实现获取地理位置信息并定位功能
- 通过html5获取地理位置信息
- Html5 Geolocation获取地理位置信息
- Html5 Geolocation获取地理位置信息
- Html5 Geolocation获取地理位置信息
- 通过IP获取地理位置信息的几种方式
- HTML5获取地理位置定位信息
- HTML5之地理信息应用 获取自己的位置
- html5中获取地理位置信息
- HTML5实现获取地理位置信息并定位功能
- Html5 Geolocation获取地理位置信息(转)
- html5 获取地理位置信息