[微信小程序]腾讯地图实现定位_小程序配置qqmapwx-优快云博客

本文详细介绍了如何在uni-app项目中集成腾讯地图API，包括账户注册、秘钥申请、下载SDK文件及定位功能实现的具体步骤。通过uni-app的uni.getLocation方法结合腾讯地图SDK，可以轻松获取并解析用户的地理位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【1】在腾讯位置服务平台注册账户：腾讯开发平台
打开链接扫码登录，
在这里插入图片描述

【2】申请秘钥；；
选择菜单【产品】–【微信小程序】—【立即接入】然后选择【webservice】,最后申请秘钥
在这里插入图片描述

实在找的不利索直接上链接：申请秘钥

填写信息提交

申请成功进入key设置，做一些简单的配置

在这里插入图片描述
配置填写完成保存，秘钥准配好之后代码中需要使用
【3】下载qqmap-wx-jssdk.js文件
下载文件： https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

把文件放入项目文件夹【components】，在使用定位的页面引入该文件

import QQMapWX from '@/components/js/qqmap-wx-jssdk.js';

【4】使用uni-app的api接口uni.getLocation开启获取当前的地理位置权限，然后利用腾讯方法reverseGeocoder解析地址

let qqmapsdk = new QQMapWX({
								     // 填写自己的Key值，这个值是与AppID绑定的
								     key: 'BJSBZ-BJ6WJ-CPJFG-KJVTS-SDZU6-P4FHY'
								 });
			uni.getLocation({
								    type: 'gcj02',
								    success: function (res) {
										// 逆地址解析方法
										qqmapsdk.reverseGeocoder({
											location: {
												latitude: res.latitude,
												longitude: res.longitude
											},
											success(res) {
												let city = res.result.address_component.city.slice(0,2) 
												 console.log(city)
											},
										})	
								    }
								})