以前如果要获取互联网用户所在地都是根据用户的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)的更多相关文章

  1. 基于HTML5 geolocation 实现的天气预报功能

    最近一直在学习HTML5,因为8月份要开发手机项目了.所以先把HTML5学习下. 基本思路: 1. 用户未设置任何城市之前,根据HTML5 geolocation 获取用户所在的地理位置. 2. 根据 ...

  2. [WPF] 浏览百度地图并获取经纬度地址信息

    项目中需要利用登记的区域和地址在百度地图上定位,并获取该地址的经纬度. 本次功能对我来说主要难点如下:1.百度地图API的基本使用方法,请首选使用百度地图的JavaScript大众版(PS:之前使用W ...

  3. HTML5 Geolocation 构建基于地理位置的 Web 应用

    HTML5 中的新功能 HTML5 是最新一代的 HTML 规范,是 W3C 与 WHATWG 合作的结果,目前仍外于开发中.自从上一代 HTML4,Web 世界已经发生了巨大的变化,HTML5 的到 ...

  4. HTML5 Geolocation学习

    GeolocationAPI学习,我写的挺枯燥的,直接跳到最后看示例. 5.1 位置信息 HTML5 Geolocation API的使用方法相当简单.请求一个位置信息,如果用户同意,浏览器就会返回位 ...

  5. html5获取经纬度,百度api获取街区名,并使用JS保存进cookie

    引用js<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= ...

  6. 百度地图API-搜索地址、定位、点击获取经纬度并标注

    百度地图api:http://developer.baidu.com/map/jsdemo.htm api申请ak:http://lbsyun.baidu.com/ 一.搜索地址.定位.点击获取经纬度 ...

  7. 基于vue 2.X和高德地图的vue-amap组件获取经纬度

    今天我就讲了一下怎么通过vue和高德地图开发的vue-amap组件来获取经纬度. 这是vue-amap的官网文档:https://elemefe.github.io/vue-amap/#/ 这是我的码 ...

  8. 【前端】html5获取经纬度,百度api获取街区名,并使用JS保存进cookie

    引用js<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= ...

  9. 调用高德API,通过输入的地址,如省份、市、区获取经纬度 ,通过输入的经纬度,获取区域详情

    一.pom <?xml version="1.0" encoding="UTF-8"?><projectxmlns="http:// ...

随机推荐

  1. 第九章 LinkedBlockingQueue源码解析

    1.对于LinkedBlockingQueue需要掌握以下几点 创建 入队(添加元素) 出队(删除元素) 2.创建 Node节点内部类与LinkedBlockingQueue的一些属性 static ...

  2. c++学习之友元

    最近工作好累呀,晚上总是失眠,自学c++的步骤都放慢了,本来之前看c++ primer的,结果这本书讲的太细节了,初学者不是很好把握.所以我又重新找了个教程,比较适合初学者.今天学习到友元函数和友元类 ...

  3. Minimum Window Substring leetcode java

    题目: Given a string S and a string T, find the minimum window in S which will contain all the charact ...

  4. 你应该抓紧学习Python,它是开发Web应用最强大的语言

    Python和少数几种编程语言,如MySQL.Perl.PHP和与LAMP打包的网络结构一起的Apache,已经成为Linux的一个基本组件.即 使从它诞生开始,Python就与其他动态编程语言如Ru ...

  5. CPC广告反作弊

    原文:http://blog.csdn.net/xwm1000/article/details/45460957 CPC广告上线也2年了,从上线以来就一直存在着作弊和反作弊的斗争,刚开始的时候流量少, ...

  6. listView/GridView getChild获取不到的解决方法

    在onCreate或onResume中调用了getChildAt()方法,这时候adapter中的Item还没有放入到AdapterView中去.... 解决方法,当activity获得焦点事件的时候 ...

  7. Jquery attr("checked") 返回checked或undefined 获取选中失效

    $('#cb').attr('checked'); 返回的是checked或者是undefined,不是原来的true和false了,有关此问题的解决方法如下: <input type='che ...

  8. MVC的Filter应用小结

    一.概念定义 Filter是一种声明式编程方式,在Asp.net MVC中它只能限制于Action(或它的Controller). Filter用途广泛:(1)判断登录与否或用户权限:(2)决策输出缓 ...

  9. Linux软件安装方法

    常用的两种软件安装方法: 1.RPM软件安装 rpm -qi 软件名 查询 rpm -ivh *.rpm 安装 rpm -e 软件名 卸载 系统自带的一些rpm包在系统镜像的Server文件夹里,需要 ...

  10. logback.xml 文件

    1.logback.xml <?xml version="1.0" encoding="UTF-8"?> <configuration> ...