仅为记录和分享,并不全面,蛮看看
遇到的坑:
1、高德地图key,不要不敢申请,大胆申请;
2、uniapp h5端获取定位信息需要部署在https(uniapp官网获取地位;)(我是需要部署在https中)
3、用浏览器测试,需要打开浏览器的定位服务(本人用的是火狐);
4、微信内置浏览器获取高德API(高德官网)类型为:微信小程序
1、第一步申请高德API的key,申请类型为【web服务】与【微信小程序】
(1)【微信小程序】主要是兼容 微信内置浏览器;
(2)【web服务】主要是uniapp H5端不能直接获取 地址信息(仅APP端支持),须先通过uni.getLocation获取经纬度,再通过第三方(高德)逆地理编码(高德逆地理编码)解析出地址信息
2、代码
/** 判断是否在微信浏览器*/
is_wx() {
let en = window.navigator.userAgent.toLowerCase()
// 匹配en中是否含有MicroMessenger字符串
if (en.match(/MicroMessenger/i) == 'micromessenger') {
this.getLocation()//微信内置浏览器
// return true
}
if (en.match(/MicroMessenger/i) != 'micromessenger') {
this.getAreas()//其他浏览器
// return false
}
},
// 微信内置浏览器
getLocation() {
const amapPlugin = new amap.AMapWX({
key: '11111111111'//高德API key类型:微信小程序
})
amapPlugin.getRegeo({
success: (data) => {
const longs = data[0].longitude
const lat = data[0].latitude
if (longs !== '' && lat !== '') {
this.turnAdrr(longs, lat)//经纬度转地区名
}
},
fail: (err) => {
console.log(err);
}
})
},
//其他浏览器
getAreas() {
uni.getLocation({
type: 'gcj02', //返回可以用于uni.openLocation的经纬度
success: (res) => {
const longs = res.longitude.toString();
const lat = res.latitude.toString();
if (longs !== '' && lat !== '') {
this.turnAdrr(longs, lat)//经纬度转地区名
}
}
});
},
// 转地址
turnAdrr(longs, lat) {
// 高德逆地理变码 https://lbs.amap.com/api/webservice/guide/api/georegeo/
let _key = '2222222';//高德API key类型:web服务
uni.request({
method: 'GET',
url: 'https://restapi.amap.com/v3/geocode/regeo?parameters',
data: {
key: _key,
location: `${longs},${lat}`,
output: 'JSON'
},
success: async (res) => {
const resData = res.data
const city = resData.regeocode.formatted_address
var ques = {
viewerArea: city,
}
await potUserInfos(ques).then(res => {})
},
fail: r => {
console.log(r);
}
});
},
高德逆地理解析: