记录一下自己解决在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后应当可以正常运行的

所以欢迎有自己见解的小伙伴跟我一起讨论呀