当前位置：首页 > news >正文

uniapp小程序，使用腾讯地图获取定位

news 来源：原创 2024/9/19 8:54:37

本篇文章分享一下在实际开发小程序时遇到的需要获取用户当前位置的问题，在小程序开发过程中经常使用到获取定位功能。uniapp官方也提供了相应的API供我们使用。
官网地址：uni.getLocation(OBJECT))
官网获取位置的详细介绍这里就不再讲述了，大家可以点击上方链接去官网查看。
我们本次开发的是小程序，需要注意的是，小程序获取定位使用的是腾讯位置服务，所以需要申请腾讯位置服务的SDK。

腾讯位置服务平台申请密钥和下载SDK

申请步骤：详细文档https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview
在这里插入图片描述

1、申请开发者秘钥

点击文档中的申请秘钥链接，跳转至腾讯位置服务平台，如下图所示申请即可。（没有账号的先注册账号）
在这里插入图片描述

2、开通webServiceAPI服务

开通webserviceAPI服务：控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)

1、申请key
在这里插入图片描述
2、复制申请好的Key值等待使用

3、下载微信小程序JavaScriptSDK

微信小程序JavaScriptSDK下载地址（点击文字即可跳转）
在这里插入图片描述
下载好解压完成后，我们一般放在根目录下面的common目录下（如下图）

4、安全域名设置

安全域名设置，在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com
在这里插入图片描述
到这一步算是申请完成，再配置一下就好了

配置manifest.json文件

在这里插入图片描述

勾选之后，视图源码会自动加上这此段代码，如果没有可以直接复制手动加上。

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

示例代码演示

//引入下载好的SDK
import QQMapWX from "../../common/qqmap-wx-jssdk.js"//获取定位函数示例methods: {//获取位置信息async getLocationInfo() {return 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;// 腾讯地图Apiconst qqmapsdk = new QQMapWX({key: 'XXXXXXXXXXXXXXXXXXXXXXXX'  //这里填写自己申请的key});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)resolve(location);},});});}}//调用函数
//函数调用可以自己去选择在页面加载的时候加载，或者有一个触发条件。（我是用的页面加载，所以放在了onload方法中）。async onLoad() {const location = await this.getLocationInfo();this.position = location.address
},
//注意：这里使用的this.position，是在data中定义的，代码示例中没有写。需要自己在data方法中定一个position变量//页面渲染
<view style="margin-top: 40rpx;margin-left: 16rpx;color:red;">当前定位：{{position}}
</view>