1、首先登錄一下?騰訊的位置服務?有賬號就登錄沒賬號就注冊，

1. 點擊右上角的控制臺
2. 點擊左側的應用管理 ---> 我的應用? ---->> 創建應用

1、創建應用?

?

?

?

?2、列表就會顯示我們剛剛創建好的 key

?

?

?3、點擊添加 key

4、按照要求填寫信息? 我們用的是小程序 所以選擇小程序 輸入自己開發者工具的 APP ID 再點擊添加，，

5、列表中會顯示一個 key 把這個key 復制一下?

2、打開自己的 HBuilder X 選擇??manifest.json 中的web配置中 把剛才復制的 key 填寫完

?

?3、看?uni-app 官網的調用??uni.getLocation的API 來配置

1、在 pages.json 中配置一下 這一行的代碼

 "requiredPrivateInfos": ["getLocation"],

?

4、在需要 引入地圖的頁面寫我們需要的地圖代碼

?

<template><view class="header"><view class="page-body"><view class="page-section page-section-gap"><map class="mapDt" :latitude="latitude" :longitude="longitude" :markers="covers"></map></view><view class="position"><image class="aaaaa" src="../../static/saoma/yzy.png" mode=""></image></view></view></view>
</template><script setup>
import { onMounted, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { onReady } from '@dcloudio/uni-app';
const id = ref(10); // 使用 marker 點擊事件需要填寫 id
const title = 'map';
const latitude = ref(39.909);
const longitude = ref(116.39742);const covers = ref([// {//   id: 101,//   latitude: 39.909,//   longitude: 116.39742,//   iconPath: '../../static/login/logo.png',//   width: 50,//   height: 50// },// {//   id: 102,//   latitude: 39.7,//   longitude: 116.39,//   iconPath: '../../static/login/logo.png',//   width: 50,//   height: 50// }
]);const formattedMarkers = covers.value.map((marker) => ({...marker// id: +8 // 使用經緯度作為 marker 的 id
}));onReady(() => {console.log('onReady');uni.getLocation({type: 'wgs84',success: function (res) {console.log('當前位置的經度：' + res.longitude);console.log('當前位置的緯度：' + res.latitude);// covers.value[0].latitude = res.latitude;// covers.value[0].longitude = res.longitude;covers.value.push({id: 101,latitude: res.latitude,longitude: res.longitude,iconPath: '../../static/login/logo.png',width: 50,height: 50});latitude.value = res.latitude;longitude.value = res.longitude;},fail: (re) => {console.log(re);}});
});
</script>
<style lang="scss">
.mapDt {width: 100%;height: 100vh;
}
.aaaaa {height: 50rpx;width: 57rpx;
}
</style>

5、效果展示

?