可能因为浏览器原因,定位会在浏览器中会失效,可以通过真机调试的方式进行定位和数据的调试。
1、调用api获取自身定位经纬度
uni.getLocation({
type: 'wgs84',
geocode: true,
success: (res) => {
console.log(res)
this.latitude = res.latitude;
this.longitude = res.longitude;
}
})
然后我们就能在res中获取到自身定位的经纬度。
2、通过经纬度获取地址信息
引入腾讯sdk.js下载js地址
然后引入到页面
import qqmapsdk from "@/utils/qqmap-wx-jssdk.js"
const QQMapWX = new qqmapsdk({
key: '2KVBZ-JCJC5-WWCIG-QALQX-3HLMZ-A7FPF'
});
// 解析地址
QQMapWX.reverseGeocoder({
location: {
latitude: this.latitude,
longitude: this.longitude
},
success: (res) => {
//定位成功
console.log(res)
},
fail: function(res) {
uni.showToast({
title: '定位失败',
duration: 2000,
icon: "none",
})
},
})
其中key为你申请的腾讯开发者地图的key值,如何申请key值可以查看官网
定位成功res返回的数据中,有自身定位的地址信息,还包括市区镇,
3、获取附近若干地址信息列表
根据腾讯地图开发者平台的api,通过传入经纬度,获取经纬度附近地址信息列表
let location = [this.latitude, this.longitude]
let StringLocation = location.toString()
uni.request({
url: "https://apis.map.qq.com/ws/geocoder/v1/",
data: {
location: StringLocation,
key: "2KVBZ-JCJC5-WWCIG-QALQX-3HLMZ-A7FPF",
get_poi: 1
},
success: (res => {
this.poisList = res.data.result.pois
})
})
poisList中就是数据信息。