基于 html5 geolocation来获取经纬度地址(copy)
以前如果要获取互联网用户所在地都是根据用户的IP地址来获取地理位置,这样获取到的数据和真实数据有很大的偏差。为了获取更加精确的位置,可以使用了html5的geolocation来获取经纬度,然后再获取所在地理位置,如何获取,我在下面会说到。先说下基本概念。
Geolocation在的navigator 对象中,我们可以通过 navigator.geolocation 来使用它。不支持 geolocation 的浏览器并不包含这一对象,那么可以通过下面的代码来做能力检测,对不同的浏览器做不同的处理。在访问 geolocation 对象时,即调用 geolocation 下面的方法时,浏览器会弹出提示,询问用户是否许可网站提供的位置服务,只有在得到用户许可过后,服务才会继续,否则将被停止。
常用的navigator.geolocation对象有以下三种方法:
获取当前地理位置:navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options)
持续获取地理位置:navigator.geolocation.watchPosition(success_callback_function, error_callback_function, position_options)
清除持续获取地理位置事件:navigator.geolocation.clearWatch(watch_position_id)
参数position_options是配置项,由JSON格式传入:
enableHighAccuracy:true/false,它将告诉浏览器是否启用高精度设备,所谓的高精度设备包含但不局限于前面所提到的 GPS 和 WIFI,值为 true 的时候,浏览器会尝试启用这些设备,默认指为 true,在这种情况下,浏览器会尽可能地进行更为精确的查询,简单地说,如果用户有可用的 GPS 设备,会返回 GPS 设备的查询结果,IP 是最后的选择,对于移动设备来说,网络接入点(基站)或许成为另一个选择,对此我还没有完全了解,但根据测试,即时没有任何额外功能的手机,也能够得到更为精确的查询结果。
maximumAge:单位毫秒,告诉设备缓存时间,主要用于设备的省电或者节省带宽方面。
timeout:单位毫秒,超时事件,获取位置信息时超出设定的这个时长,将会触发错误,捕获错误的函数将被调用,并且错误码指向TIMEOUT。
var position_option = { enableHighAccuracy: true , maximumAge: 30000, timeout: 20000 }; navigator.geolocation.getCurrentPosition(getPositionSuccess, getPositionError, position_option); |
function getPositionSuccess( position ){ var lat = position.coords.latitude; var lng = position.coords.longitude; alert( "您所在的位置: 纬度" + lat + ",经度" + lng ); if ( typeof position.address !== "undefined" ){ var country = position.address.country; var province = position.address.region; var city = position.address.city; alert( ' 您位于 ' + country + province + '省' + city + '市' ); } } |
coords其他返回信息:
coords.accuracy:返回经纬度的精度(米)
coords.speed :速度
coords.altitude :当前的高度,海拔(米)
coords.altitudeAccuracy:高度的精度(米)
coords.heading:朝向
function getPositionError(error) { switch (error.code) { case error.TIMEOUT: alert( "连接超时,请重试" ); break ; case error.PERMISSION_DENIED: alert( "您拒绝了使用位置共享服务,查询已取消" ); break ; case error.POSITION_UNAVAILABLE: alert( "获取位置信息失败" ); break ; } } |
基于 html5 geolocation来获取经纬度地址(copy)的更多相关文章
- 基于HTML5 geolocation 实现的天气预报功能
最近一直在学习HTML5,因为8月份要开发手机项目了.所以先把HTML5学习下. 基本思路: 1. 用户未设置任何城市之前,根据HTML5 geolocation 获取用户所在的地理位置. 2. 根据 ...
- [WPF] 浏览百度地图并获取经纬度地址信息
项目中需要利用登记的区域和地址在百度地图上定位,并获取该地址的经纬度. 本次功能对我来说主要难点如下:1.百度地图API的基本使用方法,请首选使用百度地图的JavaScript大众版(PS:之前使用W ...
- HTML5 Geolocation 构建基于地理位置的 Web 应用
HTML5 中的新功能 HTML5 是最新一代的 HTML 规范,是 W3C 与 WHATWG 合作的结果,目前仍外于开发中.自从上一代 HTML4,Web 世界已经发生了巨大的变化,HTML5 的到 ...
- HTML5 Geolocation学习
GeolocationAPI学习,我写的挺枯燥的,直接跳到最后看示例. 5.1 位置信息 HTML5 Geolocation API的使用方法相当简单.请求一个位置信息,如果用户同意,浏览器就会返回位 ...
- html5获取经纬度,百度api获取街区名,并使用JS保存进cookie
引用js<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= ...
- 百度地图API-搜索地址、定位、点击获取经纬度并标注
百度地图api:http://developer.baidu.com/map/jsdemo.htm api申请ak:http://lbsyun.baidu.com/ 一.搜索地址.定位.点击获取经纬度 ...
- 基于vue 2.X和高德地图的vue-amap组件获取经纬度
今天我就讲了一下怎么通过vue和高德地图开发的vue-amap组件来获取经纬度. 这是vue-amap的官网文档:https://elemefe.github.io/vue-amap/#/ 这是我的码 ...
- 【前端】html5获取经纬度,百度api获取街区名,并使用JS保存进cookie
引用js<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= ...
- 调用高德API,通过输入的地址,如省份、市、区获取经纬度 ,通过输入的经纬度,获取区域详情
一.pom <?xml version="1.0" encoding="UTF-8"?><projectxmlns="http:// ...
随机推荐
- [4] 圆锥(Cone)图形的生成算法
顶点数据的生成 bool YfBuildConeVertices ( Yreal radius, Yreal height, Yuint slices, YeOriginPose originPose ...
- CentOS6.5升级autoconf版本 Autoconf version 2.64 or higher is required
安装软件时提示说需要Autoconf 2.64或更高的版本 [root@BobServerStation twemproxy]# autoconf configure.ac:8: error: Aut ...
- 远程视频监控之应用篇(mjpg-streamer)
这篇文章将主要结合源码介绍mjpg-streamer,使小伙伴们了解视频监控的实现. 一.移植 tar xvf mjpg-streamer-r63.tar.gz cd mjpg-streamer-r6 ...
- C++分布式实时应用框架——系统管理模块
一个分布式实时系统集群动辄上百台机器,集群的规模已经限定这将是一个”封闭“的系统.你不可能再一台台去操作上百台机器,传统的人工运维方式早已不能满足当下需要,所有对集群或者集群中某个节点的操作都必需通过 ...
- Android之WifiManager
移动设备离不开网络,android平台中在包android.net.wifi下提供了一些类专门用于管理设备的Wifi功能.该包下主要存在如下几个类: 1. ScanResult:主要用来描述通过Wi ...
- 日程管理app
背景: 普通的笔记本显然具有保存占用较大空间的弊端.而笔记类app又借助于虚拟按键输入,便利度稍逊.假设使用电脑,又产生了较大空间的弊端. 手段: 成熟的书写识别技术 方法: 一.专有的划分有制定格子 ...
- ElasticSearch+Kinaba 在Windows下的安装
转自:https://blog.csdn.net/qq_28795681/article/details/79723455 1.下载安装java 2.下载ElasticSearch和Kinaba,并解 ...
- 内容匹配广告投放技术4:网盟CTR预估(百度文库课程)
原文:http://wbj0110.iteye.com/blog/2043065 该文是百度文库课程<计算广告学之内容匹配广告&展示广告原理.技术和实践>的课程笔记,感谢百度! 课 ...
- PHP的CLI综合
tip1:传入参数 使用标准的输入和输出 PHP CLI会定义三个常量,以便让在命令行提示符下与解释器进行交互操作更加容易.这些常量见表格A.表格A 常量 说明STDIN 标准的输入设备STDO ...
- 跨站点脚本编制-XSS 描述及解决方法
跨站点脚本编制可能是一个危险的安全性问题,在设计安全的基于 Web 的应用程序时应该考虑这一点.本文中,描述了这种问题的本质.它是如何起作用的,并概述了一些推荐的修正策略. 当今的大多数网站都对 We ...