HbuilderX微信小程序调用地图

1、现在src目录引入腾讯地图开放文档SDK或者下面资源包

【免费】微信小程序腾讯地图资源包资源-CSDN文库

2、把下图资源包里面文件导出

 3、在下图文件中配置小程序许可

/* 小程序特有相关 */
    "mp-weixin": {
        "appid": "wxd2511dd893c162f5",
        "setting": {
            "urlCheck": false
        },
        "usingComponents": true,
        "permission": {
            "scope.userLocation": {
                "desc": "获取位置信息，给您提供更好的服务"
            }
        }, 

 4、在App.vue中引入文件并且配置方法

<script setup lang="ts">
	import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
	import { useAppStore } from "./store"
	// 引入SDK核心类，js文件根据自己业务，位置可自行放置
	import QQMapWX from './libs/qqmap-wx-jssdk.js'
	var qqmapsdk;
	qqmapsdk = new QQMapWX({
		key: 'EMWBZ-ZKSWU-QE2VP-2PUVP-RTAA2-PCFLJ'
	});
	let getCityFn = () => {
		console.log("666");
		uni.getLocation({
			type: "wgs84",
			success: (res) => {
				console.log(res);
				// reverseGeocoder逆地址解析(根据经纬坐标返回城市名称) 
				qqmapsdk.reverseGeocoder({
					location: {
						longitude: res.longitude,  // 经度
						latitude: res.latitude // 纬度
					},
					success: (result) => {
						let app = useAppStore();
						console.log(result.result.ad_info.city);
						app.changeCity(result.result.ad_info.city)
					}
				})
			}
		})
	}
	onLaunch(() => {
		console.log("App Launch");
		// 同步获取系统信息
		let { safeAreaInsets } = uni.getSystemInfoSync();
		console.log(safeAreaInsets);
		let app = useAppStore();
		app.changeNavBarHeight(safeAreaInsets.top)
		getCityFn()
	});
	onShow(() => {
		console.log("App Show");
	});
	onHide(() => {
		console.log("App Hide");
	});
</script>
<style lang="scss">
	// 	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-plus/index.scss";
</style>

5、在仓库app.ts模块中定义方法

import { defineStore } from "pinia"
import { ref } from "vue"

// 定义一个store导出
export const useAppStore = defineStore("apostoreid", () => {
	const navbarHeight = ref(0);
	const city = ref("获取城市中")
	// 定义一个方法修改navbarHeight
	function changeNavBarHeight(data : number) {
		navbarHeight.value = data
	}
	// 获取城市
	function changeCity(data : string) {
		city.value = data
	}
	return { navbarHeight, changeNavBarHeight, city, changeCity }
})

6、在页面index中引入仓库并向组件传递参数

7、在组件中接受并使用

 8、在小程序看效果