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

 navigator.geolocation.getCurrentPosition(function(position){//成功执行的函数
document.write("当前地理位置纬度:",position.coords.latitude,";经度:",position.coords.longitude,";精度系数:",position.coords.accuracy,"米。<br>");
document.write("海拔高度:",position.coords.altitude,";精度系数:",position.coords.altitudeAccuracy,";指南针方向(0°表示正北):",position.coords.heading,";移动数度:",position.coords.speed);
}, function(error){//失败执行的函数 code 属性表示用户拒绝共享(1)、位置无效(2)或者超时(3)
document.write("错误类型: " + error.code+"<br>");
document.write("错误信息: " + error.message);
}, {
enableHighAccuracy: false, //enableHighAccuracy 是一个布尔值,表示必须尽可能使用最准确的位置信息(建议设置为false,true需要更长的时间,在移动设备上还会导致消耗更多电量)
timeout: 5000, //timeout是以毫秒数表示的等待位置信息的最长时间(超时时间,如果不需要频繁的访问用户的位置,建议设置为Infinity)
maximumAge: 25000 //maximumAge表示上一次取得的坐标信息的有效时间,以毫秒表示,如果时间到则重新取得新坐标信息
});

注:测试过根据api调用百度地图显示当前位置,测试结果与原生应用(安卓,iOS应用)获取的位置偏差较大,不适合做导航定位应用。

如果你希望跟踪用户的位置,那么可以使用另一个方法watchPosition() 。这个方法接收的参数与getCurrentPosition() 方法完全相同。实际上,watchPosition() 与定时调用getCurrentPosition() 的效果相同。在第一次调用 watchPosition()方法后,会取得当前位置,执行成功回调或者错误回调。然后,watchPosition()就地等待系统发出位置已改变的信号(它不会自己轮询位置)。 调用watchPosition() 会返回一个数值标识符,用于跟踪监控的操作。基于这个返回值可以取消监控操作,只要将其传递给clearWatch()方法即可(与使用setTimeout()和clearTimeout()类似)。例如:

 var watchId = navigator.geolocation.watchPosition(function(position){
drawMapCenteredAt(position.coords.latitude, positions.coords.longitude);
}, function(error){
console.log("Error code: " + error.code);
console.log("Error message: " + error.message);
}); clearWatch(watchId);

以上例子调用了watchPosition() 方法,将返回的标识符保存在了watchId 中。然后,又将watchId传给了clearWatch(),取消了监控操作。

html5获取用户当前位置的更多相关文章

  1. 关于html5获取用户地理位置

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...

  2. 获取用户当前位置信息的两种方法——H5、微信

    在之前的 调用百度地图API的总结 中获取当前位置信息我用的是 H5 ,其实微信也提供了获取用户地理位置的方法,现将这两种方法都贴出来,看情况选择使用. 一.H5 获取当前地理位置得到经纬度 // H ...

  3. html5获取用户当前的地理位置,即经纬度。

    $("document").ready(function(){ getMap(); }); function getMap(){ // 百度地图API功能 var map = ne ...

  4. html5获取当前的位置..在地图中

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. H5地理定位获取用户当前位置、城市

    第一步:需要在百度地图开发者平台创建一个应用:http://lbsyun.baidu.com/apiconsole/key/create 配置信息 申请配置成功以后返回一个AK 第二步:引入百度地图的 ...

  6. iOS下获取用户当前位置的信息

    #import <MapKit/MKMapView.h> @interface ViewController (){ CLLocationManager *_currentLoaction ...

  7. uniapp 在h5和小程序上使用高德获取用户城市位置

    开发文档 https://lbs.amap.com/api 错误状态 https://lbs.amap.com/api/webservice/guide/tools/info/ 虽然用的高德但是你还需 ...

  8. 微信小程序之获取用户位置权限(拒绝后提醒)

    微信小程序获取用户当前位置有三个方式: 1. wx.getLocation(多与wx.openLocation一起用) 获取当前的精度.纬度.速度.不需要授权.当type设置为gcj02 返回可用于w ...

  9. ionic 获取手机所在位置

    之前项目中需要使用到定位功能,前边的文章提到的坐标位置是有问题的,是国际坐标,国内的环境使用google地图会出现问题,所以需要使用国内的地图进行坐标解析,因为国内和国外的坐标体系不一致,需要通过转换 ...

随机推荐

  1. ChineseNumber 转换

    中文数字转换 /** * <html> * <body> * <P> Copyright 1994 JsonInternational</p> * &l ...

  2. ASP.NET WebApi 学习与实践系列(2)---WebApi 路由请求的理解

    目录 写在前面 WebApi Get 请求 1.无参数的请求 2.一个参数的请求 3.多个参数的请求 4.实体参数的请求 WebApi Post 请求 1.键值对请求 2.dynamic 动态类型请求 ...

  3. HDU2476 String painter(DP)

    题目 String painter 给出两个字符串s1,s2.对于每次操作可以将 s1 串中的任意一个子段变成另一个字符.问最少需要多少步操作能将s1串变为s2串. 解析 太妙了这个题,mark一下. ...

  4. Linux系统快速入门方法

    相信看到这篇文章的你一定是想要学习Linux,或者已经在学习Linux的人了,那我们就可以一起探讨一下,学习Linux如何快速入门呢? 首先,希望大家弄清楚自己为什么要学习Linux,有的人是因为兴趣 ...

  5. IDEA中调试时F8,F7快捷键失效

    idea中调试时F8,F7快捷键失效 原因:相关软件的快捷键占用了F8,F7,如我的有道词典占用F8了这个快捷键,导致idea调试时不能使用F8,改变有道词典的快捷键即可.

  6. css,对包含有子元素的元素进行flex后,会影响原有的布局。如何后续处理

    对包含有子元素的元素进行flex后,会影响原有的布局. 例如设置两个div,第一个div包含一个img(图片),第二个div包含多个p元素(对前面的img的说明).如下图 1:当对着两个两个div进行 ...

  7. JAVA项目之增删改查

    public class ProductDao { // 查询所有商品 // BeanListHandler查询所有商品 public List<Product> getAll() thr ...

  8. mysql的yearweek 和 weekofyear函数

    1.MySQL 的 YEARWEEK 是获取年份和周数的一个函数,函数形式为 YEARWEEK(date[,mode]) 例如 2010-3-14 ,礼拜天 SELECT YEARWEEK('2010 ...

  9. MVC、MVP及MVVM之间的关系

    介绍 写这篇随笔完全是为了加深自己的印象,毕竟写比看能获得得更多,另外本人对这三种模式的认识还是浅薄的,有待在以后的工作学习中有更深入的理解,因此不免会有误解,这里推荐大家阅读廖雪峰关于MVVM的介绍 ...

  10. 【Feign调用异常】org.springframework.web.HttpRequestMethodNotSupportedException: Request method 'GET' not supported

    一.异常场景描述 明明是post请求,为啥到达服务器后就变成了get请求 2019-05-30 18:07:17.055 [http-nio-10650-exec-4] ERROR c.x.xcaut ...