uniapp小程序：使用uni.getLocation通过腾讯地图获取相关地址信息详情（超详细）

先看运行结果：

流程：

1、在edge网页搜索腾讯位置服务

搜索后点击这里

已经有账号的就进行登录，没有账号的进行注册即可

点击控制台：

进去后点击成员管理---->我的应用---->创建应用

输入相应的参数应用名称（随便写）和应用类型更具你的项目类型进行选择我选择了出行

选择好后点击创建：

创建好后点击添加key：

打开微信小程序开发工具：

这样就获取到了key：

2、下载腾讯小程序JavaScriptJDK点击即可跳转

微信小程序JavaScript SDK | 腾讯位置服务 (qq.com)

下载其中一个都可以

解压后放在common目录下皆可，如果没有common路面自己生成即可。

3、安全域名设计

在微信小程序后台小程序 (qq.com)​​​​​​

添加request合法域名，添加apis.map.qq.com

4、配置manifest.json文件

 "permission" : {            "scope.userLocation" : {                "desc" : "为了您更好的体验，请确认获取您的位置"            }        },        "requiredPrivateInfos" : [ "getLocation", "chooseLocation", "chooseAddress" ]

5、引用代码演示

我这里吧方法引入到mixins中

//获取用户实时位置import QQMapWX from "../../common/qqmap-wx-jssdk.js"

//获取用户实时位置import QQMapWX from "../../common/qqmap-wx-jssdk.js"export const showMixin ={data(){return{show: true}},methods:{showto(){this.show=!this.showconsole.log('this.show',this.show)uni.navigateBack({delta:1})},async getLocationInfo() {// this.show = !this.showreturn new Promise((resolve) => {let location = {longitude: 0,latitude: 0,province: "",city: "",area: "",street: "",address: "",};uni.getLocation({type: "gcj02",success(res) {location.longitude = res.longitude;location.latitude = res.latitude;const qqmapsdk = new QQMapWX({key: 'ANDBZ-VEM6T-IPIXG-VEWUH-XJYGS-N2BPT'});qqmapsdk.reverseGeocoder({location,success(response) {let info = response.result;console.log(info);location.province = info.address_component.province;location.city = info.address_component.city;location.area = info.address_component.district;location.street = info.address_component.street;location.address = info.address;resolve(location);}});},fail(err) {console.log(err)}})})}}}

显示：

引入：

生命周期调用：

代码直接使用即可：

当前位置：{{position}}刷新定位{{item.name}}{{item.name}}{{item.name}}// import QQMapWX from "../../../common/qqmap-wx-jssdk.js"import {showMixin} from '../../../shopro/mixins/site.js'export default {mixins: [showMixin],data() {return {position: null,activeindex: 0,activeindexs: -1,activeindextwo: -1,list: [{name: '贵州省'}],box: [{name: '贵阳市'},{name: '安顺市'},{name: '遵义市'},{name: '毕节市'},{name: '黔东南'},{name: '黔东南'},{name: '黔东南'},{name: '黔东南'}],boxs: [{name: '花溪区'},{name: '观山湖区'},{name: '南明区'},{name: '云岩区'},{name: '白云区'},{name: '清镇'}],}},async mounted() {const location = await this.getLocationInfo();console.log('location', location)// that.position = location.province + location.citylet position = location.province + location.city + location.areaconsole.log('position', position)this.position = position},methods: {citys(index) {this.activeindextwo = index},city(index) {this.activeindexs = index},selects(index) {this.activeindex = indexuni.showLoading({title:'加载中',mask: true})// this.$refs.popup.open('center')}},// change(e){// console.log('当前模式：' + e.type + ',状态：' + e.show);// }}.area-box {width: 130rpx;height: 80rpx;background-color: #fff;text-align: center;line-height: 80rpx;margin-top: 20rpx;margin-right: 10rpx;margin-left: 10rpx;border-radius: 20rpx;}.ess {width: 100vw;height: 300rpx;/* background-color: #c9c9c9; */display: flex;justify-content: flex-start;align-items: flex-start;flex-flow: row wrap;align-content: flex-start;overflow-y: scroll;}.area {width: 100vw;height: 300rpx;/* background-color: aqua; */display: flex;justify-content: flex-start;align-items: flex-start;flex-flow: row wrap;align-content: flex-start;overflow-y: scroll;}.line {position: absolute;bottom: 10rpx;width: 70%;height: 5rpx;background-color: brown;border-radius: 50rpx;left: 0;right: 0;margin: auto;}.box {width: 130rpx;height: 100%;/* background-color: antiquewhite; */text-align: center;line-height: 80rpx;}.active {font-weight: bold;position: relative;}.chosen {width: 100vw;height: 80rpx;padding: 0 20rpx;background: #f8f8f8;}.current {display: flex;align-items: center;justify-content: space-between;width: 100vw;height: 100rpx;padding: 0 30rpx;}.map {width: 100vw;height: 100rpx;}.site {width: 100vw;height: 100vh;background-color: #fff;}

运行结果：