H5获取用户当前位置,粗略分为3种方法
:
1、H5自带的方法,获取经纬度
2、通过地图提供的JS。获取位置
3、通过微信的API(这个需要公众号 / 小程序)
1、通过H5自带的获取经纬度的方法
优点
:
需要引用的资源较少,H5自带的方法
缺点
:
1、获取的经纬度偏差较大
,如果需要配合地图使用,还需要使用地图提供的经纬度转换方法
2、目前大多数浏览器(包括手机端),已经不支持http的请求获取用户地址
,必须为https域名的才能发起请求。目前测试,在安卓手机的微信打开的浏览器和IE浏览器还能支持获取经纬度
JS:
//判断是否支持 获取本地位置
if (navigator.geolocation) {
var n = navigator.geolocation.getCurrentPosition(function(res){
console.log(res); // 需要的坐标地址就在res中
});
} else {
alert('该浏览器不支持定位');
}
当然也会有报错的时候,比如不支持http域名访问的时候,会报一个警告:
2、通过地图定位 (由于经常都是和微信打交道,个人觉得用腾讯地图相对比较准确)
简单说下:
其实所有地图的定位,也是基于H5的定位(所以很多时候引入地图定位的时候,可能会报一个警告,和H5一样,报错信息如上图)
,在进行的坐标计算,那如果是不支持H5获取定位的呢?那么地图的API则会根据IP
,查询粗略位置,定位的准确度为城市级
。详情可以看下百度地图的API。
贴出我的腾讯地图(坐标体系为gcj02
)获取经纬度的代码:
1、先引入腾讯地图的JS
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=这里要换成你们自己申请的腾讯地图的密钥&libraries=convertor"></script>
代码部分:
function getLocation(callback) {
//判断是否支持 获取本地位置
if (navigator.geolocation) {
var n = navigator.geolocation.getCurrentPosition(callback, function(fail) {
callback({
msg: '来自非https域名请求',
code: -2
});
});
} else {
callback({
msg: '你的手机不支持定位',
code: -1
});
}
}
// 腾讯地图定位转换坐标
getLocation(success => {
// 浏览器不支持定位
if (success.code) {
layer.close(loading);
layer.open({
content: '您的手机似乎不允许定位,请检查后重试'
})
} else {
var lat = success.coords.latitude;
var lng = success.coords.longitude;
// //调用地图命名空间中的转换接口 type的可选值为 1:GPS经纬度,2:搜狗经纬度,3:百度经纬度,4:mapbar经纬度,5:google经纬度,6:搜狗墨卡托
qq.maps.convertor.translate(new qq.maps.LatLng(lat, lng), 1, function(res) {
//取出经纬度并且赋值
latlng = res[0];
latitude = latlng.latitude;
longitude = latlng.longitude;
})
}
});
其他地图的使用方法都差不多,多看下地图的文档,就清楚了
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则需要公众号才行,各有优缺点。更多详细的内容,可以查看相关的文档
**THE END**