HTML5 Geolocation用来定位用户的位置。

定位用户的位置

HTMl5 Geolocation API用来得到用户的地理位置。

由于这个可能和个人隐私相关。除非用户同意否则不能使用。

浏览器支持

IE9。Firefox,Chrome,Opera和Safari 5都支持这个特性。

注意:假设使用带有GPS的设备,比如iphone。Geolocation将会更加准确。

HTML5 - 使用Geolocation

使用getCurrentPosition()方法得到用户的位置。

以下这个样例是一个简单的返回用户所在地点经纬度的样例:

  1. <script>
  2. var x=document.getElementById("demo");
  3. function getLocation()
  4. {
  5. if (navigator.geolocation)
  6. {
  7. navigator.geolocation.getCurrentPosition(showPosition);
  8. }
  9. else{x.innerHTML="Geolocation is not supported by this browser.";}
  10. }
  11. function showPosition(position)
  12. {
  13. x.innerHTML="Latitude: " + position.coords.latitude +
  14. "<br />Longitude: " + position.coords.longitude;
  15. }
  16. </script>

在线演示

代码说明:

  • 首先检查Geolocation是否支持
  • 假设支持,执行getCurrentPosition()方法,假设不支持,显示给用户信息
  • 假设getCurrentPosition()方法成功了,返回一个坐标的对象到參数指定的方法(showPosition)中
  • showPosition()方法得到显示的经纬度

上面的样例是一个主要的Geolocation脚本。没有做错误处理。

处理错误和拒绝

getCurrentPosition()方法的第二个參数用来处理错误。

指定一个方法当无法得到用户位置的时候来处理错误。

  1. function showError(error)
  2. {
  3. switch(error.code)
  4. {
  5. case error.PERMISSION_DENIED:
  6. x.innerHTML="User denied the request for Geolocation."
  7. break;
  8. case error.POSITION_UNAVAILABLE:
  9. x.innerHTML="Location information is unavailable."
  10. break;
  11. case error.TIMEOUT:
  12. x.innerHTML="The request to get user location timed out."
  13. break;
  14. case error.UNKNOWN_ERROR:
  15. x.innerHTML="An unknown error occurred."
  16. break;
  17. }
  18. }

在线演示

错误代码例如以下:

  • 权限拒绝:用户不须要执行Geolocation
  • 位置不存在:无法得到用户位置
  • 超时:操作超时

在Map中显示结果

为了在map中显示结果。你须要訪问一个能够处理经纬度的地图服务,比如,GoogleMaps:

  1. function showPosition(position)
  2. {
  3. var latlon=position.coords.latitude+","+position.coords.longitude;
  4. var img_url="http://maps.googleapis.com/maps/api/staticmap?

    center="

  5. +latlon+"&zoom=14&size=400x300&sensor=false";
  6. document.getElementById("mapholder").innerHTML="<img src=""+img_url+""+img_url+"" />";
  7. }

在上面的样例中,我们使用返回的经纬度来展示位置到Google地图中。怎样使用脚本来展示一个互动的地图,带有标记,缩放和拖动功能。

在线演示

地理位置指定信息

这里我们演示了怎样展示用户位置到地图上。然而。Geolocation也相同对于地理指定的信息很实用。

比如:

  • 最新的本地信息
  • 展示用户周围的有趣地方
  • 导航(GPS)

getCurrentPosition()方法 - 返回数据

假设成功getCurrentPosition()方法将返回一个对象。经纬度和准确的信息也会返回。

其他属性假设存在也返回。

Property                                                 Description

coords.latitude                                     The latitude as a decimal number

coords.longitude                                 The longitude as a decimal number

coords.accuracy                                  The accuracy of position

coords.altitude                                     The altitude in meters above the mean sea level

coords.altitudeAccuracy                     The altitude accuracy of position

coords.heading                                   The heading as degrees clockwise from North

coords.speed                                      The speed in meters per second

timestamp                                            The date/time of the response

Geolocation 对象 - 其他方法

watchPosition()方法 - 返回眼下的用户位置而且当用户移动后继续返回更新的位置(比如车里的GPS)。

clearWatch()方法 - 停止watchPosition()方法

以下的代码展示了怎样使用watchPositin()方法,注意你须要一个准确的GPS设备来測试(比如,iphone)

  1. <script>
  2. var x=document.getElementById("demo");
  3. function getLocation()
  4. {
  5. if (navigator.geolocation)
  6. {
  7. navigator.geolocation.watchPosition(showPosition);
  8. }
  9. else{x.innerHTML="Geolocation is not supported by this browser.";}
  10. }
  11. function showPosition(position)
  12. {
  13. x.innerHTML="Latitude: " + position.coords.latitude +
  14. "<br />Longitude: " + position.coords.longitude;
  15. }
  16. </script>

转载于:https://www.cnblogs.com/xfgnongmin/p/10650002.html

HTML5 Geolocation用来定位用户的位置。相关推荐

  1. HTML5 Geolocation(地理定位)简介

    HTML5 Geolocation(地理定位)用于定位用户的位置. 定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否 ...

  2. 微信公众号定位用户所在位置

    微信公众号定位用户所在位置 最近由于项目的原因,涉及到了微信公众号,看了几天文档加上问了问同事,对这个玩意有一点了解,写一下微信公众号定位的方法,记一下以后方便用. //获取codevar url = ...

  3. HTML5 Geolocation(地理定位)

    一.背景 在HTML规范中,增加了获取用户地理信息的API,这样使得可以基于用户位置开发互联网应用,即基于位置服务 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. Inter ...

  4. 在html5中,用于获得用户当前位置的方法

    转:https://zhidao.baidu.com/question/1048435511310408299.html <!DOCTYPE html> <html> < ...

  5. html5 geolocation 百度地图,html5 geolocation配合百度地图api实现定位

    1.了解html5 geolocation HTML5 Geolocation(地理定位)用于定位用户的位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的.=> 使用 ...

  6. 用html设计一个时间距离查询,使用HTML5 Geolocation实现一个距离追踪器

    HTML5 Geolocation(地理定位)用于定位用户的位置.那么如何实现一个距离追踪器呢?我的思路是这样的,前提是浏览器支持h5地理定位,在这个基础上,获取用户位置,更新用户位置,计算距离,显示 ...

  7. html自动获取用户位置,HTML5 - 使用Geolocation(地理定位)获取用户的位置

    一.Geolocation(地理定位) 1,基本介绍 (1)虽然 Geolocation 经常以 HTML5 的名义提到,但地理定位实际上是一个单独的标准,而且也不是经由 WHATWG 制定的. (2 ...

  8. HTML5 地理位置定位(HTML5 Geolocation)原理及应用 (调用GPS)

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...

  9. html自动获取用户位置,html5获取用户当前位置

    支持地理定位的浏览器有IE9+.Firefox 3.5+ .Opera 10.6+ .Safari 5+ .Chrome.iOS 版Safari.Android版WebKit. navigator.g ...

最新文章

  1. 收藏:因为有这篇Sublime Text使用教程,我立即卸载掉了Notepad+...
  2. Web测试需要了解的知识
  3. Linux设置界面或命令行启动
  4. Keep Walking!
  5. SAP,IBM,AC实施之比较
  6. IOS多线程开发其实很简单
  7. CodeDay#7 启动 | 北京欢迎你
  8. Android Activity:四种启动模式,Intent Flags和任务栈(转自他人博客)
  9. CSS布局口诀 - CSS BUG顺口溜
  10. linux下实现web数据同步的四种方式(性能比较)
  11. Linux上 MongoDB 实现远程连接并设置账号密码
  12. Java编程:树(实际应用)
  13. 如何使用火狐下的两款接口测试工具RESTClient和HttpRequester发送post请求
  14. linux flex安装包,安装flex builder for Linux在Ubuntu
  15. ifix组态软件研究控制按钮权限
  16. cinahl数据库怎么进入_CINAHL数据库的检索系统及相关检索方法
  17. SSH超市进销存管理系统
  18. 2021-12-28学习的道路是寂寞的,学成后的成绩是惊艳的。喜欢热闹是生物的本性,耐得住寂寞方显人性尊贵
  19. java判断excel格式_Java 设置Excel数据验证
  20. arduino 土壤温湿度传感器_Arduino上使用土壤湿度传感器

热门文章

  1. Apple Watch再立功!67岁男子意外摔倒后得救
  2. java大数据组件HBase
  3. raiserror 在 java_SQL 抛出异常错误信息- RAISERROR (存储过程)
  4. Linux网络转发和端口映射的笔记
  5. 【Spark】Spark ML 机器学习的一个案例
  6. 【kafka】kafka KeeperErrorCode = ConnectionLoss for /config/topics
  7. 【Flink】Flink 实现 AT_LEAST_ONCE EXACTLY_ONCE 案例
  8. 【siddhi】 siddhi kafka报错 SiddhiAppCreationException At stream SweetProductionStream source kafka
  9. 【Kafka】消息超过最大值限制max.request.size
  10. Netty:Netty不断打开文件的BUG