HTML5: HTML5 Geolocation(地理定位)
ylbtech-HTML5: HTML5 Geolocation(地理定位) |
1.返回顶部 |
HTML5 Geolocation(地理定位)
HTML5 Geolocation(地理定位)用于定位用户的位置。
定位用户的位置
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。
浏览器支持
Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation(地理定位).
注意: Geolocation(地理定位)对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确。
HTML5 - 使用地理定位
请使用 getCurrentPosition() 方法来获得用户的位置。
下例是一个简单的地理定位实例,可返回用户位置的经度和纬度:
实例
var x=document.getElementById("demo"); function getLocation() {if (navigator.geolocation){navigator.geolocation.getCurrentPosition(showPosition);}else{x.innerHTML="该浏览器不支持获取地理位置。";} }function showPosition(position) {x.innerHTML="纬度: " + position.coords.latitude + "<br>经度: " + position.coords.longitude; }
尝试一下 »
实例解析:
- 检测是否支持地理定位
- 如果支持,则运行 getCurrentPosition() 方法。如果不支持,则向用户显示一段消息。
- 如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象
- showPosition() 函数获得并显示经度和纬度
上面的例子是一个非常基础的地理定位脚本,不含错误处理。
处理错误和拒绝
getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数:
实例
function showError(error) {switch(error.code) {case error.PERMISSION_DENIED:x.innerHTML="用户拒绝对获取地理位置的请求。"break;case error.POSITION_UNAVAILABLE:x.innerHTML="位置信息是不可用的。"break;case error.TIMEOUT:x.innerHTML="请求用户地理位置超时。"break;case error.UNKNOWN_ERROR:x.innerHTML="未知错误。"break;} }
尝试一下 »
错误代码:
- Permission denied - 用户不允许地理定位
- Position unavailable - 无法获取当前位置
- Timeout - 操作超时
在地图中显示结果
如需在地图中显示结果,您需要访问可使用经纬度的地图服务,比如谷歌地图或百度地图:
实例
function showPosition(position) {var latlon=position.coords.latitude+","+position.coords.longitude;var img_url="http://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&zoom=14&size=400x300&sensor=false";document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>"; }
尝试一下 »
在上例中,我们使用返回的经纬度数据在谷歌地图中显示位置(使用静态图像)。
Google地图脚本
上面的链接向您演示如何使用脚本来显示带有标记、缩放和拖曳选项的交互式地图。
给定位置的信息
本页演示的是如何在地图上显示用户的位置。不过,地理定位对于给定位置的信息同样很有用处。
实例:
- 更新本地信息
- 显示用户周围的兴趣点
- 交互式车载导航系统 (GPS)
getCurrentPosition() 方法 - 返回数据
T若成功,则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用,则会返回其他下面的属性。
属性 | 描述 |
---|---|
coords.latitude | 十进制数的纬度 |
coords.longitude | 十进制数的经度 |
coords.accuracy | 位置精度 |
coords.altitude | 海拔,海平面以上以米计 |
coords.altitudeAccuracy | 位置的海拔精度 |
coords.heading | 方向,从正北开始以度计 |
coords.speed | 速度,以米/每秒计 |
timestamp | 响应的日期/时间 |
Geolocation 对象 - 其他有趣的方法
watchPosition() - 返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车上的 GPS)。
clearWatch() - 停止 watchPosition() 方法
下面的例子展示 watchPosition() 方法。您需要一台精确的 GPS 设备来测试该例(比如 iPhone):
实例
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; }
尝试一下 »
2.返回顶部 |
3.返回顶部 |
4.返回顶部 |
5.返回顶部 |
6.返回顶部 |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
转载于:https://www.cnblogs.com/storebook/p/8881102.html
HTML5: HTML5 Geolocation(地理定位)相关推荐
- linux脚本获取经纬度,我想在命令行上获得linux设备的精确经纬度。就像HTML5中的地理定位。我的眉毛没法接触...
我想从我的Linux设备发送当前Lat Long的电子邮件.我试过在HTML5浏览器中进行地理定位,效果很好.但我希望它在命令行上.我尝试了很多选项,比如curl,geoip,通过IP访问一些网站,但 ...
- 手机端html使用地理定位,html5之使用地理定位
1)使用地理定位: 通过navigator.geolocation访问地理定位功能,返回一个Geolocation对象: 1.1)Geolocation对象成员: getCurrentPosition ...
- HTML5 新特性 - 地理定位(基于高德地图API)
定位的基础与原理 IP定位 运营商基站定位 GPS定位 地理定位的实现 地理定位API允许用户向web应用程序提供他们的位置(经纬度).但是这个操作需要用户授权. 获取地理定位的相关代码如下: let ...
- HTML5 学习之地理定位
html5 获取坐标: Java代码 <!DOCTYPE HTML> <html> <head> <title>test1.html</tit ...
- html自动获取用户位置,HTML5 - 使用Geolocation(地理定位)获取用户的位置
一.Geolocation(地理定位) 1,基本介绍 (1)虽然 Geolocation 经常以 HTML5 的名义提到,但地理定位实际上是一个单独的标准,而且也不是经由 WHATWG 制定的. (2 ...
- 如何用html5定位,如何利用html5进行地理定位
满意答案 ggk666 2017.10.13 采纳率:57% 等级:9 已帮助:413人 HTML5 Geolocation(地理定位)用于定位用户的位置 点击这个按钮,获得您的位置: 试一下 ...
- html定位的实例,H5案例分享:基于浏览器的HTML5地理定位
基于浏览器的HTML5地理定位 地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML ...
- php html5定位,HTML HTML5 地理定位 - 闪电教程JSRUN
HTML5 Geolocation(地理定位)用于定位用户的位置. 亲自试一试:在谷歌地图上显示您的位置 定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特 ...
- html5经纬度定位 源码_基于浏览器的HTML5地理定位
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理和一个 ...
- html5新特性 gps,老生常谈H5新特性:地理定位
HTML5新特性 1.新的语义标签 2.表单2.0 3.视频和音频 4.Canvas绘图 5.SVG绘图 6.地理定位 7.拖放API 8.WebWorker 9.WebStorage 10.WebS ...
最新文章
- JMM和happens-before原则
- python论坛签到_论坛自动签到教程
- Python colormap库的安装和使用
- 「理解HTTP」之常见的状态码
- mysql拒绝访问root用户_Linux部署MySql数据库(超简单)
- 程序员面试揭秘之求职渠道
- 分类算法学习(一)——KNN算法的原理及简单实现
- Delphi 中的DLL 封装和调用对象技术
- Dubbox学习笔记
- 弹出界面 eth1: 设备 eth1 似乎不存在, 初始化操作将被延迟。
- 《测绘综合能力》真题易错本
- 旁轴相机,单反相机之间的区别(转)
- 去了字节跳动,才知道年薪 40w 的 90 后 Android 开发者有这么多?
- 注册码方式注册多可系统
- 五千来多字,就为了聊聊HTTP报文,请求响应头,cookie以及HTTPS加密方式
- 【Java中实现微信公众号模板消息推送】
- 论latex插入图片最好的方法!
- 攻防世界-MISC-Time_losing
- 关于 simulink 的 1/z 模块是什么的问题
- java atd_Android R.java问题汇总
热门文章
- 凭几句话的方案,你什么也做不了
- FireFox支持NPAPI接口,最新版本是52.9,53已经不支持了
- 解决办法:char类型的实参与LPCWSTR类型的形参类型不兼容
- 建议让游客参与修长城
- linux 系统启动级别,LINUX系统启动级别介绍与解释
- ap计算机科学ab,AP微积分AB_AP科目介绍|AP考试网
- c++ 17 新特性理解
- 64位 内存占用大 嵌入式_懵!面试官问我:Object o = new Object() 占用了多少个字节?...
- verilog将像素数据写入txt_【测试工具】测试数据生成工具datafaker
- python文本交换_有没有办法用python交换文本文件中的两行文本?