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

概述

目前我试过的就是你用vue后缀是拿不到比例的你可以用nvue当然uniapp的uvue应该是更加可以的
我使用的是高德所以你得在高德的后台声请原生的Android的key才可以
如果是vue3的开发模式的话不用使用this来获取当前对象
使用scale对象来接受和改变缩放比例会比较友好
然后直接走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>