HTML5 地理位置定位(HTML5 Geolocation)
HTML5的强大,无需我过多的介绍,其中Geolocation地理定位是HTML5的重要特性之一。使用这个特性我们就可以开发出基于地理位置信息的应用。例如你要实现查询用户周边酒店、加油站等功能时,你可以调用百度地图、高德地图、google地图等接口,然后根据用户的具体地理坐标位置等信息来搜寻周边事物。
当然,每个人的地理位置信息是属于他个人的隐私。所以一般游览器都会先询问用户是否愿意,如果用户拒绝的话,则用户位置信息是不可用的。
废话不多说,直接上代码:
<script>
var x=document.getElementById("demo");
functiongetLocation()
{
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
functionshowPosition(position)
{
x.innerHTML="Latitude: "+ position.coords.latitude +
"<br />Longitude: "+ position.coords.longitude;
}
</script>
以上是没有报错信息处理的代码。如果未能显示出纬度(Latitude)、经度(Longitude)信息的话,那你就得检查下游览器是否支持地理定位。
(1)如果支持,则运行 getCurrentPosition() 方法。如果不支持,则向用户显示一段消息。
(2)如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象。showPosition() 函数则是获得并显示经度和纬度。
当然我们也可以有处理错误的功能反馈给用户:
function showError(error){switch(error.code){case error.PERMISSION_DENIED://用户不允许地理定位x.innerHTML="User denied the request for Geolocation."break;case error.POSITION_UNAVAILABLE://无法获取当前位置x.innerHTML="Location information is unavailable."break;case error.TIMEOUT://操作超时x.innerHTML="The request to get user location timed out."break;case error.UNKNOWN_ERROR://未知错误x.innerHTML="An unknown error occurred."break;}}
getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数:
navigator.geolocation.getCurrentPosition(showPosition,showError);
嗯,这样你就可以获得了用户的地理位置坐标信息。其实最重要的无非就是上面的那行代码,和获取坐标的两个方法:
position.coords.latitude
//纬度
position.coords.longitude
//经度
就酱紫了?不,它还能获得些呢,客观别急,接着往下看。
getCurrentPosition()--返回数据:
属性 | 描述 |
coords.latitude | 十进制数的纬度 |
coords.longitude | 十进制数的经度 |
coords.accuracy | 位置精度 |
coords.altitude | 海拔,海平面以上以米计 |
coords.altitudeAccuracy | 位置的海拔精度 |
coords.heading | 方向,从正北开始以度计 |
coords.speed | 速度,以米/每秒计 |
timestamp | 响应的日期/时间 |
嗯~是不是有点屌?但是你有没发现,这种定位并不是实时的。如果用户使用的是移动端,并且他在移动中,那坐标也必须跟随着在不停的改变中,而之前获得的坐标还有毛用啊!呵呵,莫慌!屌炸天的Geolocation对象,有个牛逼的方法:
watchPosition() - 返回用户的当前位置,并继续返回用户移动时的更新位置。
clearWatch() - 停止 watchPosition() 方法。
如果你有台爱疯(iphone)之类精确的GPS设备,那就更是如虎添翼了。
<script>
var x=document.getElementById("demo");
function getLocation(){if (navigator.geolocation){navigator.geolocation.watchPosition(showPosition);}else{x.innerHTML="Geolocation is not supported by this browser.";}}
function showPosition(position){x.innerHTML="Latitude: " + position.coords.latitude +"<br />Longitude: " + position.coords.longitude;}
</script>
HTML5 地理位置定位(HTML5 Geolocation)相关推荐
- HTML5 地理位置定位(HTML5 Geolocation)原理及应用 (调用GPS)
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...
- HTML5地理位置定位API接口开发
一. 地理位置定位原理介绍 地理位置的定位目前有如下几种方式:GPS,IP地址,Wifi(国内基本不用),GSM/CDMA基站的方式. HTML5地理位置定位的实现: 1. 实现基于浏览器(无需后端支 ...
- html浏览位置坐标,HTML5教程 | HTML5地理定位(GeoLocation API)
HTML5 GeoLocation API(地理定位API)可以获取用户所在的地理位置.由于安全的原因,在使用HTML5 GeoLocation的时候,会弹出对话框让用户决定是否共享他们所在的位置,只 ...
- html选择定位位置,html5的地理位置定位
html5提供的地理位置定位使开发人员不用借助其他软件就能轻松实现位置查找,地图应用,导航等功能. 地理位置定位基本原理 GPS, WIFI, IP, 手机信号基站 核心对象 Geolocation是 ...
- html5 判断获取定位,HTML5利用Geolocation API获取地理位置定位功能
如何使用html5地理位置定位功能 定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确.首先我们要检测用 ...
- HTML5获取地理位置定位信息
HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用.本文结合实例给大家分享如何使用HTML5,借助百度.谷歌地 ...
- html定位的实例,H5案例分享:基于浏览器的HTML5地理定位
基于浏览器的HTML5地理定位 地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML ...
- html5经纬度定位 源码_基于浏览器的HTML5地理定位
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理和一个 ...
- 使用HTML5实现地理位置定位
HTML5 Geolocation(地理定位)用于定位用户的位置. 定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置.鉴于该特性可能侵犯用户的隐私,除非用户同意,否则 ...
最新文章
- 安装asp.net mvc4后mvc3项目编译报错
- R语言:异常数据处理
- Javascript模块模式学习分享
- python日志输入 print 常用格式化符号 logging 日志输出
- iOS常用的忽略警告
- Framework7 + Angular 开发问题解决汇总
- 物联网卡11位和13位号码的区别在于哪
- 电脑有电流声怎么解决_为什么音箱有电流声?电脑音箱电流声怎么消除
- Android6.0之AMS启动app中篇之创建app进程
- 开源GIS-01-开源库的编译
- 5G关键技术简介带你揭开5G神秘面纱
- VSCode 菜单栏不见了,该怎么办
- oracle tns 启动失败,Oracle 监听启动失败 TNS-12555: TNS:permission denied 解决方案
- MySQL原理与实践(二):一条update语句引出MySQL日志系统
- 夺宝奇兵 (优先队列 + 贪心 + 暴力枚举)
- C++基础之运算符重载
- 华为鸿蒙P10plus,华为P10 Plus全面评测 华为P10 Plus值不值得买
- 在matlab中怎么限定值域,matlab中如何限定wgn函数的值域
- 天津办理测绘资质流程以及要求(转让天津测绘资质)
- 2021-01-17【转载-知识】为什么说你的运营团队一定要有一名女生?