vue移动端获取定位_关于关于vue移动端经纬度定位以及POI检索周边小区
记录一下自己解决在vue移动端上定位的问题
先说下需求：进入首页后获取到用户地址，并根据地址检索附近POI
首先我是直接使用百度地图api的getCurrentPosition方法获取经纬度
先引入百度地图api，过程官网上都有
geolocation.getCurrentPosition(function (r) {
let lng = r.longitude
let lat = r.latitude
let pointBak = new BMap.Point(Number(lng), Number(lat));
getUserLocation(pointBak) //获取到经纬度后进行相应操作的方法
console.log('lng>>lng=',lng)
console.log('lat>>lat=',lat)
})
说真的这种方法是真的方便，不过在ios与安卓的微信浏览器上相差有点大，安卓微信浏览器上也不是说不能获取到，直接偏差了数个城市，
然后我以为是兼容问题，研究好久也没找到是为什么，所以后面我就直接在外层加上了一层使用h5获取经纬度的方法，获取失败走百度的
贴代码：
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(success){
// alert('h5获取成功')
console.log('successsuccesssuccesssuccesssuccess>>>>',success)
console.log('successsuccesssuccesssuccesssuccess>>>>',success)
// 获取成功取出经纬度(gps,需要转换
lng = success.coords.longitude;
lat = success.coords.latitude;
pointArr.push({lng:lng,lat:lat});
// gps转换百度坐标方法
convertor.translate(pointArr, 1, 5, function (item) {
console.log('item>>>=',item)
// 转换后的经纬度坐标
lng = item.points[0].lng
lat = item.points[0].lat
})
},function (error) {
// alert('h5获取失败')
geolocation.getCurrentPosition(function (r) {
lng = r.longitude
lat = r.latitude
console.log('lng>>lng=',lng)
console.log('lat>>lat=',lat)
})
// console.log('微信>>>=',that.$wx)
},{
enableHighAcuracy: true, // 允许精确获取
timeout: 5000, // 超时时间
maximumAge: 1000
})
}else{
that.$relogin('您的设备暂不支持定位功能！',false)
console.log("当前系统不支持GPS API")
}
首先h5获取成功后拿到的经纬度是GPS坐标系，使用此坐标需要通过经纬度转换，比如：
var convertor = new BMap.Convertor();
pointArr.push({lng:lng,lat:lat});
convertor.translate(pointArr, 1, 5, function (item) {
console.log('item>>>=',item)
// 转换后的经纬度坐标
lng = item.points[0].lng
lat = item.points[0].lat
let pointBak = new BMap.Point(lng, lat);
getUserLocation(pointBak) //拿到经纬度后进行相应操作的函数
})
然后就可以通过这个经纬度查询当前地理位置并检索附近小区了，这里使用的是百度检索POI的方法
贴代码：
var options = { //options 作为百度localsearch方法的一个入参【以对象形式
renderOptions : {
map : map,
},
onSearchComplete: function(results){ //onSearchComplete必须字段，带回调参数
// 检索周边小区，状态正确
if (local.getStatus() == BMAP_STATUS_SUCCESS){
// results就是检索出来的合集。。。。
sessionStorage.setItem('nearIr',JSON.stringify(results.Hr))
}
},
pageCapacity : 10
};
var local = new BMap.LocalSearch(map, options); //map为百度容器实例，我自己觉得不是很必要
local.search(that.sendData.address+",小区"); //这里local.search入参其实是一个以逗号分隔的字符串，很明显的能看到我使用一个变量与“，小区”拼接
然后到这里呢还是有一个问题，h5获取经纬度对于ios10.0版本及以上不支持貌似，好像是因为国家安全政策什么额不能用HTTP进行获取，要改为HTTPS，总之我不是太懂额样子
然后刚好新增了一个项目分享的功能，那正好使用微信jssdk全解决了，微信jssdk配置方法官方文档也都有，我认为我阐述的没有官方文档清楚，所以去官网看吧，配置完成之后呢
最后我的代码就变成了这个样子：
this.$nextTick(function () {
var geolocation = new BMap.Geolocation();
var map = new BMap.Map("allmap");
var that = this;
var lng;
var lat;
var convertor = new BMap.Convertor();
var geo = new BMap.Geocoder();
var pointArr = [];
var locat = window.location;
var options = {
renderOptions : {
map : map,
},
onSearchComplete: function(results){
// 检索周边小区，状态正确
if (local.getStatus() == BMAP_STATUS_SUCCESS){
sessionStorage.setItem('nearIr',JSON.stringify(results.Hr))
}
},
pageCapacity : 10
};
var local = new BMap.LocalSearch(map, options);
// 判断微信
isWeiXin()
// noWeChat()
function isWeiXin(){
//window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
var ua = window.navigator.userAgent.toLowerCase();
//通过正则表达式匹配ua中是否含有MicroMessenger字符串
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
// 微信执行微信获取经纬度
weChat()
}else{
// 不是微信执行浏览器h5获取经纬度
noWeChat()
}
}
function weChat() {
// 微信配置
let localUrl = locat.href.split('#')[0];
console.log(localUrl)
// let getsign = "http://jsyizhifu.js118114.com/haobai_task/getSingnWx?url=" + encodeURIComponent(localUrl);
that.$api.getLocaltion({url:localUrl}).then(res=>{
console.log('微信请求成功>>>res=',res)
that.$wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '********************', // 必填，公众号的唯一标识
timestamp: res.data.timestamp, // 必填，生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
signature: res.data.signature,// 必填，签名，见附录1
// 必填，需要使用的JS接口列表，所有JS接口列表见官方js接口
// 这里配置获取地理位置所需要的接口权限
jsApiList: ['getLocation']
});
// console.log('微信请求成功>>>=',wx)
that.$wx.ready(function(){
console.log('进入ready方法。。。')
that.$wx.getLocation({
type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
success: function (res) {
console.log('微信获取地址成功')
let lng = res.longitude
let lat = res.latitude
pointArr.push({lng:lng,lat:lat});
// gps转换百度坐标方法
convertor.translate(pointArr, 1, 5, function (item) {
console.log('item>>>=',item)
// 转换后的经纬度坐标
lng = item.points[0].lng
lat = item.points[0].lat
})
},
fail: function(res) {
console.log('微信获取地址失败>>>',JSON.stringify(res))
}
})
});
that.$wx.error(function(){
console.log('微信执行失败')
});
}).catch(err=>{
console.log('微信权限接口请求失败>>>=',err)
})
}
function noWeChat() {
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(success){
// alert('h5获取成功')
// 获取成功取出经纬度(gps,需要转换
lng = success.coords.longitude;
lat = success.coords.latitude;
pointArr.push({lng:lng,lat:lat});
// gps转换百度坐标方法
convertor.translate(pointArr, 1, 5, function (item) {
console.log('item>>>=',item)
// 转换后的经纬度坐标
lng = item.points[0].lng
lat = item.points[0].lat
})
},function (error) {
// alert('h5获取失败')
geolocation.getCurrentPosition(function (r) {
lng = r.longitude
lat = r.latitude
})
// console.log('微信>>>=',that.$wx)
},{
enableHighAcuracy: true, // 允许精确获取
timeout: 5000, // 超时时间
maximumAge: 1000
})
}else{
that.$relogin('您的设备暂不支持定位功能！')
console.log("当前系统不支持GPS API")
}
}
function getUserLocation(point) { //point传入new point实例
geo.getLocation(point, (res) => {
console.log('res>>>>=',res)
});
}
})
上面那个就是全部代码，没有配置好微信config或者不需要用到微信jssdk的小伙伴可以直接执行noWeChat()方法，在正确引入百度地图api后应当可以正常运行的
所以欢迎有自己见解的小伙伴跟我一起讨论呀