h5地理定位

在项目开发中&＃xff0c;总免不了做一些定位的功能。特别是在电商的项目中&＃xff0c;做地理定位再正常不过了。当然&＃xff0c; 说到定位&＃xff0c;大家第一反应就是腾讯地图、百度地图、高德地图。不错&＃xff0c;其实&＃xff0c;我也是用这些。
其实&＃xff0c;不管哪个厂家的地图&＃xff0c;无外乎都是先拿到当前的经纬度&＃xff0c;然后再跟据经纬度做地址解析。当然&＃xff0c;最最最最重要的。就是你的协义必须必须是https&＃xff0c;记住&＃xff0c;是https&＃xff0c;https。当然&＃xff0c;你也可以不用https,只用http&＃xff0c;不过&＃xff0c;这样定位是不准确的。&＃xff08;如果用http协议&＃xff0c;腾讯地图会定位到当前县/区的中心&＃xff0c;而百度地图会定位到当前市市中心&＃xff09;

方法一&＃xff1a;腾讯地图定位

最简单而且最粗爆的方法就是在html里面直接引入iframe

然后&＃xff0c;在页面上就会出来一个地图

之后&＃xff0c;在js中&＃xff0c;写入以下函数

//注意&＃xff0c;如果是用jQ写的话&＃xff0c;这一段必须被外面一层的$(function(){})里面
//也就是说&＃xff0c;下面的那一段函数必须写在$(function(){])里面
//而下面那一串函数的意思就是点击地图上下方的地址列表&＃xff0c;它就会相应的定位到那儿
//而同时&＃xff0c;也会拿到你当前所点击的地址中相应的一些地理信息
window.addEventListener(&＃39;message&＃39;, function (event) {// 接收位置信息&＃xff0c;用户选择确认位置点后选点组件会触发该事件&＃xff0c;回传用户的位置信息var loc &＃61; event.data;if (loc && loc.module &＃61;&＃61; &＃39;locationPicker&＃39;) {//防止其他应用也会向该页面post信息&＃xff0c;需判断module是否为&＃39;locationPicker&＃39;console.log(loc) //这儿拿到的就是经纬度还有一些详细的地址什么的&＃xff0c;大家可以打印出来看看就明白了。let poiaddress &＃61; loc.poiaddress;let poiname &＃61; loc.poiname;//console.log(poiaddress &＃43; &＃39; &＃39; &＃43; poiname)$(&＃39;#BaoXiuShenQing_XiangXiWeiZhi&＃39;).val(poiaddress)$(&＃39;#BaoXiuShenQing_XiangXiWeiZhi&＃39;).css({fontSize:&＃39;12px&＃39;})}
}, false)

方法二&＃xff1a;h5地理定位

然而&＃xff0c;在h5中&＃xff0c;也提供了一个地理定位的方法。该方法在菜鸟教程那儿也能很容易找到。

该方法的名字是 navigator.geolocation.getCurrentPosition(success,error);里面的参数有两个&＃xff0c;一个是定位成功后的返回&＃xff0c;另一个是定位失败的返回。

h5Position() {return new Promise((resolve, reject) &＃61;> {//resolve({ bol: true, longitude: 116.104904, latitude: 24.277311 })if (navigator.geolocation) {let params &＃61; {enableHighAccuracy: true, //表示是否允许使用高精度geocode: true //是否解析地址信息。解析的地址信息保存到Position对象的address、addresses属性中//详细的参数可以参考 https://blog.csdn.net/weixin_30408739/article/details/99012875}navigator.geolocation.getCurrentPosition((position) &＃61;> {let longitude &＃61; position.coords.longitude //经度let latitude &＃61; position.coords.latitude //纬度resolve({ bol: true, longitude: longitude, latitude: latitude })}, (error) &＃61;> {reject({ bol: false, msg: &＃39;获取经纬度失败&＃39; })});} else {reject({ bol: false, msg: &＃39;您的设备不支持卫星定位,请手动选择&＃39; })}})
},

QQMap(longitude, latitude) { //腾讯地图里的经纬度解析实际地址&＃xff1a;如 广东省广州市XXX....return new Promise((resolve, reject) &＃61;> {let xy &＃61; latitude &＃43; &＃39;,&＃39; &＃43; longitude$.ajax({url: &＃39;https://apis.map.qq.com/ws/geocoder/v1/?location&＃61;&＃39; &＃43; xy &＃43; &＃39;&key&＃61;你的key&get_poi&＃61;1&＃39;,data: {output: &＃39;jsonp&＃39; //这个必须得这么写},dataType: &＃39;jsonp&＃39;, //这个也一样&＃xff0c;必须得这么写}).done(res &＃61;> {let obj &＃61; {longitude: longitude,latitude: latitude,address: res.result.address,}resolve({ bol: true, xyAddress: obj, all: res })}).fail(err &＃61;> {reject({ bol: false, msg: &＃39;获取地址失败,请手动选择&＃39; })})})
},

那么&＃xff0c;这两串代码结合起来的话&＃xff0c;就是长这么的样子

getAddress(){this.h5Position().then(res&＃61;>{let longitude &＃61; res.longitude;let latitude &＃61; res.latitude;return this.QQMap(longitude , latitude)}).then(res&＃61;>{//这儿得到的就是腾讯地图中用经纬度解析到的详细地址//里面是一个大对象&＃xff0c;包含了当前定位的推荐地址和粗操地址//同时&＃xff0c;也包含了当前定位中的周边地址&＃xff0c;类似你打开微信定位里&＃xff0c;有周边推荐的门店什么的console.log(res);})
}