H5 移动端获取当前位置
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(百度地图)
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文件
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则需要公众号才行,各有优缺点。更多详细的内容,可以查看相关的文档