Uniapp vue3框架编写 微信小程序 引入腾讯地图

申请腾讯地图api

自己搜腾讯地图api         你好懒 

然后

1. 登陆注册

2.点我的应用

3.点创建应用

如下图创建好了后   点右边的添加key

填名字 勾选需要的项

然后下载那个JDK压缩包

点进去就如下面

点那个JavascriptSDK1.1或者1.2都可以吧 我用1.1的             你好懒

最后解压 放到你的工程文件夹里面 

我这里放在这

在vue文件里面引用的话 写 

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

不过由于这个腾讯地图JDK文件已经许久未更新了 我们需要自己在里面修改一句

最后一行的 XXX（我已经忘记是什么的了） 改成 

export default QQMapWX

如下图

调配次数

vue文件代码         

 到这一步不进行真机调试都可以正常运行

<template>  
  <map class="map" 
  :latitude="latitude" 
  :longitude="longitude" 
  :markers="covers" 
  @regionchange="handleRegionChange"></map>  
  
</template>  
  
<script setup>  
import { ref, reactive ,onMounted } from 'vue';  
// 引入腾讯地图APi
import QQMapWX from '@/libs/qqmap-wx-jssdk.js';

  
const latitude = ref(0);  
const longitude = ref(0);  
const covers = ref([]); // 存放标记点数组  
  
// 获取经纬度  
function getCurrentLocation () {  
	uni.getLocation({  
		type: 'gcj02',  
		success: (res) => {  
		  latitude.value = res.latitude;  
		  longitude.value = res.longitude;
			console.log(latitude.value,longitude.value)
			// 设置点位  
		  // setCovers(latitude.value, longitude.value); 		
		},
		fail: (err) => {
		    console.error('获取位置信息失败', err);
		}  
  });  
};  
  
// 地图视野发生变化  
function handleRegionChange (e) { 
	// 屏幕滑动结束
	if (e.type === 'end') {
		// console.log("regionchange 事件:", e);
		// console.log("滑动屏幕结束,当前中心点",e.detail.centerLocation);
			// 设置点位  
		setCovers(e.detail.centerLocation.latitude, e.detail.centerLocation.longitude);  
	}   
};  
  
// 设置点位  
function setCovers(Latitude, Longitude) {  
	const location = {  
		id: "0",  
		latitude: Number(Latitude),  
		longitude: Number(Longitude),  
		// 图片标记点
		iconPath: '../../../../static/image/icon/position.png',
		 width: 15 ,
		 height: 15  ,
	};  
	covers.value = [location]; 
	// 打印基本位置信息
	// console.log("回传的位置信息",location);
	latitude.value = Latitude;
	longitude.value = Longitude;   
	   
	 	  
	 // 腾讯地图Api
	 const qqmapsdk = new QQMapWX({
	 	key: 'XXX'  //这里填写自己申请的key
	 });
	 	qqmapsdk.reverseGeocoder({
			location: {
				latitude: latitude.value,
				longitude: longitude.value
			},
		
	 		success(response) {
	 			let info = response.result;
	 			console.log("来自腾讯地图Api",info);
	 		}
	 	})
	 							
	 
};  


// 在组件加载时调用  
onMounted(() => {  
  getCurrentLocation();  
});  

</script>  
  
<style>  
.map{
	width: 750rpx;
	height: 1000rpx;
}
/* 样式代码 */  
</style>

地图 接口返回地址截图

要用的话用那个红笔画出来的一条 返回.adress 输出就可以了

遇到的问题 ：

1. 在真机演示的时候会出现 频繁的请求api 不知道为什么   

频繁的请求 会导致这个api使用量飞快的消耗 但是这不是重点

重点是 网络延迟会变高 最后就崩溃了 而且返回的地理位置解析也因为延迟而不再准确

可以在测试工具里面的network项里面看网络使用请求 不过我也不是很懂 但是右边的那个往返耗时就比较明了了 很卡 跑不起来

- 后面知道了 要节流 好高级

首先需要写一个节流函数本体 

// 自定义节流函数  
function throttle(func, delay) {  
  let lastCall = 0;  
  return function(...args) {  
    const now = new Date().getTime();  
    if (now - lastCall < delay) {
		console.log("还有",now - lastCall,"ms")
      return;  
    }  
    lastCall = now;  
	console.log("执行一次");
    return func(...args);  
  };  
}  

然后创建一个节流函数 这里因为我们其实只需要对使用了腾讯地图api的哪个函数使用节流就好了 也就是 setCovers()函数

// 节流 setCover 函数
const throttledSetCovers = throttle(setCovers, 200);

2.看不懂的话 把里面注释的console.log取消注释 多看看输出吧

3.百度问文心一言也挺强大的 多问问

最后版本的代码

<template>  
  <map class="map" 
  :latitude="latitude" 
  :longitude="longitude" 
  :markers="covers" 
  @regionchange="handleRegionChange"></map>  
  
</template>  
  
<script setup>  
import { ref, reactive ,onMounted } from 'vue';
	// 防抖节流
// import _ from 'lodash';
	// 引入腾讯地图APi
import QQMapWX from '@/libs/qqmap-wx-jssdk.js';

const latitude = ref(0);  
const longitude = ref(0);  
const covers = ref([]); // 存放标记点数组  
  
// 获取经纬度  
function getCurrentLocation () {  
	uni.getLocation({  
		type: 'gcj02',  
		success: (res) => {  
			latitude.value = res.latitude;  
			longitude.value = res.longitude;
			console.log(latitude.value,longitude.value)
			// 设置点位  
		  // setCovers(latitude.value, longitude.value); 		
		},
		fail: (err) => {
		    console.error('获取位置信息失败', err);
		}  
  });  
};  
  
// 地图视野发生变化  
function handleRegionChange (e) { 
	// 屏幕滑动结束
	if (e.type === 'end') {
		// console.log("regionchange 事件:", e);
		// console.log("滑动屏幕结束,当前中心点",e.detail.centerLocation);
			// 设置点位  
		throttledSetCovers(e.detail.centerLocation.latitude, e.detail.centerLocation.longitude);  
	}   
};  
  
// 设置点位  
function setCovers(Latitude, Longitude) {
	console.log("执行二次");
	const location = {  
		id: "0",  
		latitude: Number(Latitude),  
		longitude: Number(Longitude),  
		// 图片标记点
		iconPath: '../../../../static/image/icon/position.png',
		 width: 15 ,
		 height: 15  ,
	};  
	covers.value = [location]; 
	// 打印基本位置信息
	// console.log("回传的位置信息",location);
	latitude.value = Latitude;
	longitude.value = Longitude;   
		  
	 // 腾讯地图Api
	 const qqmapsdk = new QQMapWX({
	 	key: 'B3MBZ-NEPW5-QEGIB-IDQMT-SBBSH'  //这里填写自己申请的key
	 });
	 	qqmapsdk.reverseGeocoder({
			location: {
				latitude: latitude.value,
				longitude: longitude.value
			},
		
	 		success(response) {
	 			let info = response.result;
	 			console.log("来自腾讯地图Api",info);
	 		}
	 	})
	 							
	 
};  

	// 自定义节流函数  
function throttle(func, delay) {  
  let lastCall = 0;  
  return function(...args) {  
    const now = new Date().getTime();  
    if (now - lastCall < delay) {
		console.log("还有",now - lastCall,"ms")
      return;  
    }  
    lastCall = now;  
	console.log("执行一次");
    return func(...args);  
  };  
}  

// 创建 handleRegionChange 的节流版本  
const throttledHandleRegionChange = throttle(handleRegionChange, 200); // 假设延迟为 200 毫秒  

// 节流 setCover 函数
const throttledSetCovers = throttle(setCovers, 200);   
  
// 在组件加载时调用  
onMounted(() => {  
	getCurrentLocation();  
});  

</script>  
  
<style>  
.map{
	width: 750rpx;
	height: 1000rpx;
}
/* 样式代码 */  
</style>