APP端地图模块

需求：在uniapp中写一个页面，实现在页面中全屏展示地图模块，使用高德地图API获取当前位置的经纬度坐标，将经纬度度坐标转换为当前位置的中文名，将获取的经纬度展示在map组件中，并且在当前位置上显示标记图，标记当前的位置，在页面中显示出来，点击标记图片会弹出详细信息的气泡，在气泡中展示当前位置的中文名称，在地图控件的右下角中设置一个刷新按钮，实现刷新地图位置的功能。

实现：首先需要你自己去高德开放平台上注册，然后获取一个属于自己的key。

然后要在HBuilder编辑器，在自己的项目中的manifest.json的APP模块配置勾选上定位功能，将从高德开放平台上获取的key跟用户名在当中进行填写。这样子，我们demo的前置条件就准备好咯，接下来就是写代码部分了。

vue3中的script代码部分如下：

<script setup>
	import {onMounted, ref} from 'vue'
	// 初始化经度
	const longitude = ref(0)
	// 初始化维度
	const latitude =ref(0)
	// 初始化标记点
	const markers = ref([])
	// 新增状态来控制气泡显示
	const mcallout = ref(false)
	
	// 获取当前屏幕的宽度和高度,将获取到的值在style中进行赋值
	const {windowWidth,windowHeight,appName} = uni.getSystemInfoSync()
	
	// 编写一个方法，获取当前位置的经纬度信息，并且将其渲染到map组件中，通过图片在当前位置表示定位到当前
	const getCurrentLocation = async () =>{
		try{
			// 获取当前的地理位置，使用国测局坐标系
			const res = await uni.getLocation({
				type:'gcj02'
			})
			// 将获取到的经纬度的进行赋值
			longitude.value = res.longitude
			latitude.value = res.latitude
			// 获取中文的位置名称
			const locationName = await getLocationName(res.longitude,res.latitude)
			// 将获取到的经纬度信息及中文位置名称渲染到markers中
			 markers.value = [{
			      id: 1,
			      longitude: res.longitude,
			      latitude: res.latitude,
			      iconPath: '../../static/images/ma.jpg',
			      width: 30,
			      height: 30,
			      callout: {
				    content: locationName || '当前位置', // 如果没有地址，显示默认文本
			        // 点击显示当前地址详细信息,控制气泡是否显示
					display: mcallout.value ?  'ALWAYS' : 'BYCLICK',
			        padding: 10,
			        borderRadius: 5,
			        bgColor: '#ffffff',
			        color: '#000000',
			      }
			    }]
		}catch(error){
			console.log('获取位置失败',error)
		}
	}
		
		// 使用高德地图API获取当前中文地址
		const getLocationName = async (longitude,latitude) =>{
			// 高德地图key
			const key = '你自己获取的key'
			// 高德地图逆地理编码
			const url = `https://restapi.amap.com/v3/geocode/regeo?output=json&location=${longitude},${latitude}&key=${key}`
				return new Promise((resolve, reject) => {
						// 发送网络请求
						uni.request({
							url: url,
							method: 'GET',
							success: (response) => {
								if (response.data.regeocode) {
									// 解析并返回地址
									resolve(response.data.regeocode.formatted_address)
								} else {
									//返回空字符串
									resolve('')
								}
							},
							fail: (error) => {
								console.log('获取位置失败', error)
								// 拒绝promise
								reject('')
							}
						})
					})
		}
		
		// 更新气泡的状态
		const onCallout = () =>{
			// 切换气泡显示状态
			mcallout.value = !mcallout.value
			// 更新markers以反映当前气泡的状态
			updateCallout()
		}
		// 更新气泡的信息
		const updateCallout = ()=>{
			// 根据气泡状态更新气泡显示方式
			markers.value[0].callout.display = mcallout.value ?  'ALWAYS' : 'BYCLICK'
		}
		
		// 点击图片进行刷新
		const refresh = () => {
		    // 如果不是当前定位的位置时，则重新定位到当前位置 
			// 如果在当前位置,且点击了图标,在气泡中显示当前位置的中文名称
			// 则对气泡进行隐藏,恢复到初始页面,只在当前定位显示图标
			getCurrentLocation()
			// 隐藏气泡
			mcallout.value = false
			// 更新气泡信息
			updateCallout()
		}
		
		onMounted(()=>{
			getCurrentLocation()
		})
		
</script>

map组件中的写法如下：

<view class="">
		<map class="map" 
		:longitude="longitude" 
		:latitude="latitude" 
		:style="'height:'+windowHeight*2+'rpx;'"
		:markers="markers"
		@markertap="onCallout"
		>
		<cover-image
		class="images"
		src="../../static/images/图片1.png"
		@click="refresh"
		></cover-image>
		</map>
	</view>

因为我用的是用uniapp的nvue开发，在nvue页面中，全屏显示用100vh跟百分比是不生效的，所以我们可以用另外一种写法，即获取当前屏幕的宽度跟高度，然后在style中进行赋值，就可以实现全屏显示啦。代码部分如下：

// 获取当前屏幕的宽度和高度,将获取到的值在style中进行赋值
	const {windowWidth,windowHeight,appName} = uni.getSystemInfoSync()
   :style="'height:'+windowHeight*2+'rpx;'"

实现效果：

测试：在HBuider编辑器中，选择浏览器运行展示不出当前的页面，可以在电脑中，下载一个手机模拟器，进行测试，在手机模拟器中，不能选择用x86的，因为高德地图在上面会显示成黑色的，看不出效果，可以用数据线，将手机与电脑进行连接，用真机进行测试，我就是用的真机进行测试的哦

谢谢观看。