vue3+uniapp中使用高德地图实现撒点效果

前言：

vue3+uniapp中使用高德地图实现撒点效果

实现效果：

操作步骤：

1、引入高德插件，并生成js配置插件，详情步骤请点我

import amapFile from '../../libs/amap-wx.js'

2、页面上配置我们的map标签

复制代码

<template>
	<!-- 地图控件 -->
	<view>
		<map 
			id="map" 
			:longitude="mapObj.longitude" 
			:latitude="mapObj.latitude" 
			:scale="mapObj.scale" 
			:markers="mapObj.markers"
			@markertap="markertap"
			@click="mapClick"
		></map>
	</view>
</template>

3、js部分，定义我们相关变量

javascript 复制代码

let mapObj = reactive({
		longitude:116.481028, //经度
		latitude:39.989643, //维度
		scale:17, //地图默认缩放等级
		markers: [], //点位数据
	})

	let locationListener = ref('')
	let initMap = function(){
		const myAmapFun = new amapFile.AMapWX({
			key: 'bb****', // 你的高德地图API Key
		});
		console.log('myAmapFun',myAmapFun)
		
	}



	onShow(()=>{
		initMap()
		initMapWZ()
	})

4、获取我们当前位置

javascript 复制代码

// 获取当前位置信息
	let initMapWZ = function(){
		console.log('init')
		// uni.getLocation uniapp官网提供的获取定位的方法，调用过多会导致无法使用，需要使用监听方法
		uni.getLocation({
			type: 'gcj02', //国测局坐标 gcj02,要使用地图map必须使用这个
			success: res=> {
				getNowDWBackFun(res)
			},
			fail:err=>{
				//getLocation:fail 频繁调用会增加电量损耗，可考虑使用 wx.onLocationChange 监听地理位置变化
				console.log(err)
				startLocationWatch()
			},
			complete:()=>{
				console.log('complete')
			}
		})
	}

5、更新我们当前实时位置

javascript 复制代码

let startLocationWatch = ()=> {
	  // 1. 检查权限
	  uni.authorize({
	    scope: 'scope.userLocation',
	    success: () => {
	      // 2. 开启位置更新
	      uni.startLocationUpdate({
	        success: () => {
	          // 3. 监听位置变化
	          locationListener = uni.onLocationChange((res) => {
	            // 在此更新地图或处理位置数据
				getNowDWBackFun(res)
	          })
	        },
	        fail: (err) => {
	          console.error('启动位置更新失败：', err)
	        }
	      })
	    },
	    fail: () => {
	      uni.showModal({
	        title: '权限提示',
	        content: '需要位置权限以持续获取位置',
	        success: (res) => {
	          if (res.confirm) uni.openSetting()
	        }
	      })
	    }
	  })
	}

6、将我们当前位置，用图片展示在地图上

javascript 复制代码

// 拿到当前最新位置以后的回调方法
	let getNowDWBackFun = res=>{
		console.log('当前位置的经度：' + res.longitude);
		console.log('当前位置的纬度：' + res.latitude);
		mapObj.longitude = res.longitude
		mapObj.latitude = res.latitude
		mapObj.markers = [{
			id: 1,
			longitude:res.longitude,
			latitude: res.latitude,
			iconPath: '../../static/now.png',
			title: '当前位置',
			width:25,
			height:25
		}]
	}

7、当我们的界面关闭时候，停止我们的实时更新位置方法

javascript 复制代码

// 停止监听
	let stopLocationWatch = ()=>{
	  if (locationListener.value) {
	    uni.stopLocationUpdate() // 停止位置更新
	  }
	}

	onHide(()=>{
		stopLocationWatch()
	})