Uniapp的App环境下使用Map获取缩放比例

概述

1. 目前我试过的就是你用vue后缀是拿不到比例的你可以用nvue当然uniapp的uvue应该是更加可以的
2. 我使用的是高德所以你得在高德的后台声请原生的Android的key才可以
3. 如果是vue3的开发模式的话不用使用this来获取当前对象
4. 使用scale对象来接受和改变缩放比例会比较友好
5. 然后直接走uniapp的api通过uni来操作获取对象就可以了

操作

1. 后缀名解释

可以查看我这篇文章 Uniapp的vue、nvue、uvue后缀名区别

2. 申请高德的key和配置uniapp解析Map

可以查看这里官方解释：官方说明

3. 放弃使用this

在您的uni-app项目中，您试图通过uni.createMapContext来获取地图的缩放比例，但是遇到了问题。从您提供的代码和描述来看，可能存在几个问题，下面我将逐一分析和提供解决方案：

this上下文问题： 在Vue 3的组合式API中，您不应该使用this关键字，因为它在组合式API中未定义。您应该直接使用ref定义的响应式变量。

地图上下文创建： 在getMapScale函数中，您应该直接使用uni.createMapContext(‘mapBoday’)来创建地图上下文，而不是传入this。

4. 绑定scale

这里的主要的目的是动态获取缩放的比例

5. 使用uniapp给的地图api直接拿取地图api就可以了

省略哈

代码解释

<template>
	<view style="" class="mapBox">
		<map id="mapBoday" class="mapBoday" ref="mapBoday"
			style="width: 800rpx; height: 800rpx; z-index: 1;position: absolute;" :show-compass="showCompass"
			:latitude="latitude" :longitude="longitude" @markertap="onMarkerTap" :markers="markers" @click="getclick"
			:scale="scale" @regionchange="onRegionChange">
		</map>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'

	// 定义经纬度状态
	const latitude = ref(28.009883);
	const longitude = ref(111.126059);
	const markers = ref([]); //地图的地址
	const showCompass = ref(true)

	const mapPlan = ref(true)

	const address = ref('')
	const scale = ref(1)

	const mapBoday = ref()
	const getclick = (e) => {
		console.log(e)
	}
	const onMapFinish = (e) => {
		console.log("更新事件", e)
	}

	const onRegionChange = (event) => {
		// 监听地图缩放，获取当前缩放级别
		console.log("监听到缩放", event, event.detail)


		if (event.type === 'end') {
			// console.log('当前缩放级别:', event.detail);
			// scale.value = event.detail.scale;
			getMapScale()
		}
	};

	// 获取当前缩放比例
	const getMapScale = () => {
		const mapContext = uni.createMapContext('mapBoday');
		mapContext.getScale({
			success(res) {
				console.log('当前缩放比例:', res.scale);
				scale.value = res.scale;
			},
			fail(err) {
				console.error('获取缩放比例失败:', err);
			}
		});
	};


	// 获取当前位置信息
	const getLocation = () => {
		uni.getLocation({
			type: 'gcj02', // 使用 gcj02 坐标系

			success: (res) => {
				// latitude.value = res.latitude;
				// longitude.value = res.longitude;


				address.value = res.address;

				// 设置标记（marker）
				markers.value = [{
						id: 1,
						latitude: res.latitude,
						longitude: res.longitude,
						iconPath: '../../static/icon/location.png', // 可自定义图标路径
						width: 10,
						height: 10
					},
					{
						id: 2,
						latitude: 28.009883, // 标记的经度
						longitude: 111.126059, // 标记的纬度
						iconPath: '../../static/icon/destination.png', // 自定义图标
						width: 10,
						height: 10,
						callout: {
							content: '点击导航到这里',
							color: '#000',
							fontSize: 12,
							borderRadius: 5,
							bgColor: '#fff',
							padding: 5,
							display: 'ALWAYS'
						}
					}
				];
			},
			fail: (err) => {
				console.log('获取定位失败:', err);
			}
		});
	};

	// 点击标记时的处理函数
	const onMarkerTap = (event) => {
		const markerId = event.id;
		const selectedMarker = markers.value.find(marker => marker.id === markerId);

		console.log(event, markerId, selectedMarker)
		if (selectedMarker) {
			// 打开高德地图进行导航
			uni.openLocation({
				latitude: selectedMarker.latitude,
				longitude: selectedMarker.longitude,
				name: '导航目的地', // 可选，显示在高德地图上的目的地名称
				address: '这里是目的地地址', // 可选，显示在高德地图上的详细地址
				success() {
					console.log('导航成功');
				},
				fail(err) {
					console.error('导航失败:', err);
				}
			});
		}
	};

	//切换视图
	const openMapPlan = () => {

	}

	// 组件挂载时获取地理位置
	onMounted(() => {

		getLocation();



	});
</script>

<style lang="scss" scoped>
	.mapBox {
		height: 800rpx;
		width: 800rpx;
		border: 1px solid red;
	}
</style>