一、简介

  html5为window.navigator提供了geolocation属性,用于获取基于浏览器的当前用户地理位置。

  window.navigator.geolocation提供了3个方法分别是:

void getCurrentPosition(onSuccess,onError,options);
//获取用户当前位置

int watchCurrentPosition(onSuccess,onError,options);
//持续获取当前用户位置

void clearWatch(watchId);
//watchId 为watchCurrentPosition返回的值
//取消监控

options = {
     enableHighAccuracy,//boolean 是否要求高精度的地理信息
     timeout,//获取信息的超时限制
     maximumAge//对地理信息进行缓存的时间
}
//options可以不写,为默认即可

二、position对象

  当成功获取地理位置信息时候,onsuccess方法中会返回position对象,通过这个对象可以获取地理位置的相关信息,包括:

  position对象的属性:

latitude,//纬度
longitude,//经度
altitude,//海拔高度
accuracy,//获取纬度或者经度的精度
altitudeAccurancy,//海拔高度的精度
heading,//设备前景方向。正北方向的顺时针旋转角
speed,//设备的前进速度 m/s
timestamp,//获取地理位置信息时候的时间

三、基于google map的例子

  直接看代码:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在页面上使用google地图示例</title>
</head>
<body onload = 'init()'>
    <div id="map" style='width:800px;height:800px;'></div>
    <script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=false'></script>
    <script type="text/javascript">
        function init(){
            if(navigator.geolocation){
                navigator.geolocation.getCurrentPosition(function(pos){
                        var coords = pos.coords;
                        var latlng =new google.maps.LatLng(coords.latitude,coords.longitude);
                        var options = {zoom:14,center:latlng,mapTypeId : google.maps.MapTypeId.ROADMAP};
                        var map1;
                        map1 =new google.maps.Map(document.getElementById('map'),options);
                        var marker =new google.maps.Marker({
                                position : latlng,
                                map : map1
                                });
                        var infowindow =new google.maps.InfoWindow({
                               content : '当前位置!'
                               });
                        infowindow.open(map1,marker);
                        });
            }
        }
    </script>
</body>
</html>

另附:

getCurrentPosition()

使用方法:navigator.geolocation.getCurrentPosition(successCallback, [errorCallback] , [positionOptions]);

A) successCallback 获取定位成功时执行的回调函数 eg: function(position){alert("纬度:"+position.coords.latitude+";经度:"+position.coords.longitude)};

successCallback返回一个地理数据对象position作为参数,该对象有属性timestamp和coords。timestamp表示该地理数据创建时间(时间戳);coords包括另外七个属性:

  1. coords.latitude:估计纬度
  2. coords.longitude:估计经度
  3. coords.altitude:估计高度
  4. coords.accuracy:所提供的以米为单位的经度和纬度估计的精确度
  5. coords.altitudeAccuracy:所提供的以米为单位的高度估计的精确度
  6. coords.heading: 宿主设备当前移动的角度方向,相对于正北方向顺时针计算
  7. coords.speed:以米每秒为单位的设备的当前对地速度

B) errorCallback 定位失败时执行的回调函数 eg: function(error){alert(error.message);}

errorCallback返回一个错误数据对象error作为参数,该对象有属性:

  1.code :表示失败原因,返回1 or 2 or 3 ,具体为

    PERMISSION_DENIED (数值为1) 表示没有权限使用地理定位API

    POSITION_UNAVAILABLE (数值为2) 表示无法确定设备的位置,例如一个或多个的用于定位采集程序报告了一个内部错误导致了全部过程的失败

    TIMEOUT (数值为3) 表示超时

    详情查看 http://dev.w3.org/geo/api/spec-source.html#permission_denied_error

  2.message :错误提示内容

C) positionOptions 用来设置positionOptions来更精细的执行定位,positionOptions拥有三个属性 {enableHighAccuracy:boolean , timeout:long , maximumAge:long}。

enableHighAccuracy 【true or false(默认)】是否返回更详细更准确的结构,默认为false不启用,选择true则启用,但是会导致较长的响应时间及增加功耗,这种情况更多的用在移动设备上。

timeout 设备位置获取操作的超时时间设定(不包括获取用户权限时间),单位为毫秒,如果在设定的timeout时间内未能获取位置定位,则会执行 errorCallback()返回code(3)。如果未设定timeout,那么timeout默认为无穷大,如果timeout为负数,则默认 timeout为0。

maximumAge 设定位置缓存时间,以毫秒为单位,如果不设置该值,该值默认为0,如果设定负数,则默认为0。该值为0时,位置定位时会重新获取一个新的位置对象;该值大 于0时,即从上一次获取位置时开始,缓存位置对象,如果再次获取位置时间不超过maximumAge,则返回缓存中的位置,如果超出 maximumAge,则重新获取一个新的位置。

watchPosition()

功能getCurrentPosition()相似,watchPosition()是定期轮询设备的位置,同样拥有3个参数,与getCurrentPosition()相同。

使用方法:navigator.geolocation.watchPosition(successCallback, [errorCallback] , [positionOptions]);

执行步骤:

1.首先初始化positionOptions内的属性(详细同上)。

2.判断是否有缓存位置对象,该对象年龄是否可用、是否超出maximumAge ,如果可用且未超出,返回缓存位置,否则重新确定设备位置。

3.位置定位操作:

  i.建立一个计时器,进行位置获取操作,如果在timeout之前完成,执行下一步;如果未在timeout之前完成,则执行errorCallback(),code为3,跳出步骤做等待重新激活。

  ii.如果在timeout之前获得位置成功,则执行successCallback(),然后重置计时器(从获取位置成功时刻重新算起),继 续挂起获取新位置。当有与之前位置有明显不同位置出现时,再次执行successCallback(),并重复操作,该循环直到timeout超时或者获 取操作中遇到POSITION_UNAVAILABLE错误执行errorCallback()为止,亦或者执行clearWatch()操作。

clearWatch()

配合watchPosition()使用,用于停止watchPosition()轮询。

watchPosition()需要定义一个watchID,var watchID = watchPosition(...),通过clearWatch(watchID)来停止watchPosition(),使用方法类似setInterval。

 

js定位navigator.geolocation的更多相关文章

  1. HTML5浏览器定位navigator.geolocation.getCurrentPosition

    <!DOCTYPE html> <html> <body> <p id="demo">点击这个按钮,获得您的坐标:</p> ...

  2. JS新API标准 地理定位(navigator.geolocation)/////////zzzzzzzzzzz

    在新的API标准中,可以通过navigator.geolocation来获取设备的当前位置,返回一个位置对象,用户可以从这个对象中得到一些经纬度的相关信息. navigator.geolocation ...

  3. JS新API标准 地理定位(navigator.geolocation)

    在新的API标准中,可以通过navigator.geolocation来获取设备的当前位置,返回一个位置对象,用户可以从这个对象中得到一些经纬度的相关信息. navigator.geolocation ...

  4. 用navigator.geolocation.getCurrentPosition在IOS10以上的系统无法定位

    昨天老板告诉我代码有Bug(定位失败),于是各种测试最终发现IOS10以上版本手机不能成功(穷,买不起iphone,测试不完全),先贴失败代码: var city =""; nav ...

  5. 完美解决window.navigator.geolocation.getCurrentPosition,在IOS10系统中无法定位问题

    目前由于许多用户都将电话升级到了iOS系统,苹果的iOS 10已经正式对外推送,相信很多用户已经更新到了最新的系统.然而,如果web站没有及时支持https协议的话,当很多用户在iOS 10下访问很多 ...

  6. 使用navigator.geolocation来获取用户的地理位置信息

    使用navigator.geolocation来获取用户的地理位置信息 W3C 中新添加了一个名为 Geolocation的 API 规范,Geoloaction API的作用就是通过浏览器获取用户的 ...

  7. navigator.geolocation例子

    navigator.geolocation例子 <html> <head> <script type="text/javascript"> fu ...

  8. 解决window.navigator.geolocation.getCurrentPosition在IOS10系统中无法进行地理定位问题

    昨天接到用户通知说在点击"看场地"时无法获取地理位置信息. 在接到通知时,首先想到的是排查机型问题.由于客户多为IOS用户,所以最先看的是在安卓是有没有此问题的发生,调查结果为安卓 ...

  9. JS中navigator对象详解

    <code class="language-html"><!doctype html> <html> <head> <meta ...

随机推荐

  1. 阅读&lt;构建之法&gt;第三10、11、12章

    第10章:典型用户和场景 阅读了第10章之后,我知道典型用户很重要,典型用户是某类群体的代表,他们的观点能够反映一类人的观点与对产品的要求,那么要怎么样才能够从一类群体里,选择正确的典型用户反映我们研 ...

  2. 性能标准:Apdex介绍

    目前的应用程序性能测试工具有多方面的局限.每种工具都有其自己对性能的定义,产生太多混乱或矛盾的数值,并缺少简洁的结论.IT经理们无法深入了解性能,而这是软件与用户对关键应用的体验有关的事. 听云作为新 ...

  3. 开发版本控制git

    git init 在git命令行中依次输入 touch readme.txt并回车, git add . 点代表所有, git commit -m "init first"并回车, ...

  4. 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据

    瀑布流加载显示数据,在当下已经用的很普遍,尤其是我们在做网上商城时,在产品列表页面已经被普遍使用. 对于实现瀑布流布局的解决方案主要有以下两种方式: 1.对每一条显示数据使用绝对定位+浮动的方式,这样 ...

  5. Java并发——使用Condition线程间通信

    线程间通信 线程之间除了同步互斥,还要考虑通信.在Java5之前我们的通信方式为:wait 和 notify.Condition的优势是支持多路等待,即可以定义多个Condition,每个condit ...

  6. Struts2.xml中result type属性说明

    在struts2配置XML里,result中type属性有以下几种: 1.dispatcher:服务器跳转到前台,后面跟着可以是JSP.htm等等前台页面,默认是这种. 2.redirect:客户端跳 ...

  7. mysql 查询每个分组前N条记录

    mysql 查询每个分组前N条记录 假设存在表movie,  有字段 id, part(地区), mcount(观看次数) 现查询每个地区观看次数最多的3部movie, 则表 ###id虽未存在gro ...

  8. x++ and ++x

    http://blog.sina.com.cn/s/blog_6c762bb30101ar1w.html 看到个东西,搞不清的时候可以看看 =.=

  9. jmeter读取文件进行参数化时随机取值实现

    jmeter能用来做参数化的组件有几个,但是都没有随机取值的功能,遇到随机取值的需求怎么办呢? 突发奇想,可以用函数_StringFromFile来实现,先来介绍下此函数: 此函数位于函数助手中, 函 ...

  10. Tomcat下的Server.xml配置文件详解

    自15年毕业到现在已经入行两年多了,一直以来没有深入的了解过tomcat的详细配置,只懂修改一下端口号.在网上找了些相关资料来支撑这篇文章,深入了解server.xml文件各配置的作用 <?xm ...