3种方法:
1、H5自带的方法,获取经纬度
2、通过地图提供的JS。获取位置
3、通过微信的API(这个需要公众号 / 小程序)

1、通过H5自带的获取经纬度的方法

优点:

需要引用的资源较少,H5自带的方法

缺点:

1、获取的经纬度偏差较大,如果需要配合地图使用,还需要使用地图提供的经纬度转换方法
2、目前大多数浏览器(包括手机端),已经不支持http的请求获取用户地址,必须为https域名的才能发起请求。目前测试,在安卓手机的微信打开的浏览器和IE浏览器还能支持获取经纬度

JS:

        // 获取当前经纬度
getLocation: function () {
var that = this
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
alert('经度:'+ position.coords.latitude)
alert('纬度:'+ position.coords.longitude)
}, function (error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert('用户拒绝对获取地理位置的请求。')
break;
case error.POSITION_UNAVAILABLE:
alert('位置信息是不可用的。')
break;
case error.TIMEOUT:
alert('请求用户地理位置超时。')
break;
case error.UNKNOWN_ERROR:
alert('未知错误。')
break;
}
}, { enableHighAcuracy: false });
} else {
alert('Geolocation is not supported by this browser.')
}
},

2、通过地图定位 

简单说下:
其实所有地图的定位,也是基于H5的定位(所以很多时候引入地图定位的时候,可能会报一个警告,和H5一样,报错信息如上图),在进行的坐标计算,那如果是不支持H5获取定位的呢?那么地图的API则会根据IP,查询粗略位置,定位的准确度为城市级。详情可以看下百度地图的API。

代码部分:

引入地图js(百度地图)<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=密钥"></script>

             if (navigator.geolocation) {
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
alert('您的位置:'+r.point.lng+','+r.point.lat);
}else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
} else {
alert('Geolocation is not supported by this browser.')
}

结果:http地址下ios定位比较准确,Android 定位在地级市。
解决:http 换成 https

3、微信提供的API (这个必须有公众号才能实现)

1、确保公众号的配置一切正常(合法域名、token、回调地址、JS合法域名…)

2、引入相关的JS文件

<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

3、获取签名 => 初始化需要请求的API => 获取定位

// 这里的ajax请求,是为了获取签名(都是后端的工作了。根据文档生成签名等)
$.ajax({
type: "post",
url: "你自己的生成签名的地址",
data: {
// 这里好像是需要回调的地址
'askUrl': encodeURIComponent(location.href.split('#')[0])
},
dataType: "json",
success: function (data) { // 生成签名后,开始使用微信的 wx.config 。其中jsApiList就是我们要用的API的列表,因为只需要取经纬度,所以用getLocation就可以了
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: data.appId, // 必填,公众号的唯一标识
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature, // 必填,签名,见附录1
jsApiList: [
'getLocation'
]
});
wx.error(function (res) {
alert("失败:"+res.msg");
}); // wx.config 检测无误后,会进入到 ready 方法 。 注意type参数。微信多数的坐标体系都为gcj02
wx.ready(function () {
wx.getLocation({
type: "gcj02",
success: function (res) {
latitude = res.latitude;
longitude = res.longitude;
},
cancel: function (res) {
alert("定位失败,权限不足")
},
});
});
}
});

  

总结:目前的H5获取定位,都需要HTTPS的支持。而微信的api则需要公众号才行,各有优缺点。更多详细的内容,可以查看相关的文档

参考:https://blog.csdn.net/Jioho_chen/article/details/83592630

H5 移动端获取当前位置的更多相关文章

  1. H5高德地图获取当前位置

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta http ...

  2. H5 高德地图获取当前位置信息

    返回结果:jsonp_393330_({"status":"1","info":"OK","infocode& ...

  3. 亲历H5移动端游戏微信支付接入及那些坑(二)——获取Openid和授权

    第一篇中将一些坑说明,那么这篇开始正式进入接入步骤.具体的参数说明,我不会列出,毕竟微信官方文档都有,我想大家都看的懂,而且这接口也有可能微信会变动,所以不列出来,也是不想引起大家的误解,接入步骤只起 ...

  4. FineReport移动端如何获取地址位置

    对于企业大多数员工来说,由于其工作位置是固定的,可以有多种方式进行上班打卡签到以保证该员工有按时正常来上班,但是对于经常需要出差,去客户现场的员工来说,就无法保证他们是否有去上班,所以希望能通过手机位 ...

  5. 调用微信JsAPI端获取位置

    public partial class test : BasePage { protected test() { AccessPage = PageWebType.WX; } protected s ...

  6. pc和移动端获取滚动条的位置

    移动端获取滚动条:document.body.scrollTop pc端获取滚动条:document.documentElement.scrollTop

  7. H5移动端知识点总结

    H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解display:box的布局 理解flex布局 Flex布局兼容知识点总结 回到顶部 移动开 ...

  8. 【全面总结】js获取元素位置大小

    [js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...

  9. CAS 单点登录 移动端获取TGT、ST 已经移动端登录页面不进行跳转的设置

    一.设置移动客户端验证ST通过后,页面不进行302重定向跳转 修改web.xml <!--**************************************************** ...

随机推荐

  1. SQL中null比较的雷区

    SQL中遇到null要格外小心! oracle最坑: oracle中在可为null的字段上做逻辑关系运算要格外小心,如 <>,>,=,<,任何与null的运算结果都返回fals ...

  2. C++学习笔记----4.4 继承情况下的类作用域嵌套

    引言: 在继承情况下,派生类的作用域嵌套在基类作用域中:如果不能在派生类作用域中确定名字,就在外围基类作用域中查找该名字的定义. 正是这种类作用域的层次嵌套使我们能够直接访问基类的成员,就好像这些成员 ...

  3. 高效整洁CSS代码原则 (下)

    6. 适当的代码注释 代码注释可以让别人更容易读懂你的代码,且合理的组织代码注释,可使得结构更加清晰.你可以选择做的样式表的开始添加目录: /*---------------------------- ...

  4. shell 中数组学习

         因为应用shell的时间不是太长.对于数组在实际项目中没有接触过.今天在需要把相似于:a=1,2,3,4这种东西转换. 之前用的方法是用awk,分别取出.所以今天想是否有更好更简洁的方法-- ...

  5. iOS开发之NSRunLoop的进一步理解

    http://www.cnblogs.com/pengyingh/articles/2343920.html iPhone应用开发中关于NSRunLoop的概述是本文要介绍的内容,NSRunLoop是 ...

  6. ubuntu上安装字体

    # fc-list # sudo apt-get -y install fontconfig xfonts-utils # sudo cp       XXX.ttf        /usr/shar ...

  7. 足迹地图 搜索jvectormap

    https://blog.wangjunfeng.com/foot_print/

  8. PyCharm2019 永久激活

    <!-- 2019激活码 2019-06-21新更新 --> D00F1BDTGF-eyJsaWNlbnNlSWQiOiJEMDBGMUJEVEdGIiwibGljZW5zZWVOYW1l ...

  9. nginx简单使用

    nginx开启./nginx重启./nginx -s reload关闭./nginx -s stop或quit

  10. 【To Read】Shortest Palindrome(KMP)

    题意:Given a string S, you are allowed to convert it to a palindrome by adding characters in front of ...