uni.createMapContext(mapId, componentInstance?)创建并返回 map 上下文 mapContext 对象
官网详细说明https://uniapp.dcloud.net.cn/api/location/map.html#mapcontext

注意： 这里官网说的componentInstance是非必传的，但是如果你不传，配置对象的success和fail回调函数根本就不会调用

话不多说，直接上代码

<template>
  <view class="wx-map">
    <map
      id="wx-map-instance"
      style="width: 750rpx; height: 838rpx"
      :latitude="currentLocation.latitude"
      :longitude="currentLocation.longitude"
      :markers="markers"
      :show-location="true"
      :scale="16"
      @regionchange="handleRegionChange"
    ></map>
  </view>
</template>
<script setup>
import { computed, ref, onMounted, getCurrentInstance } from "vue";
const _this = getCurrentInstance();

defineOptions({ name: "WxMap" });

const props = defineProps({
  orgList: { type: Array, default: () => [] },
  currentLocation: {
    type: Object,
    default: () => ({
      latitude: 0,
      longitude: 0,
    }),
  },
});

// 地图相关数据
let mapContext = null;
const currentMapScale = ref(16); // 当前地图缩放级别

// 计算标记点数据
const markers = computed(() => {
  return props.orgList
    .map((org) => {
      // 安全地转换经纬度为数字
      const latitude = Number(org.latitude) || 0;
      const longitude = Number(org.longitude) || 0;

      // 只有当经纬度有效时才创建标记点
      if (!latitude || !longitude) return null;

      return {
        id: org.id || Date.now() + Math.random(), // 优先使用唯一标识
        latitude,
        longitude,
        width: 37,
        height: 42,
        // 根据机构类型选择对应的图标
        iconPath:
          "https://tzgg.tianyucare.com:18443/tzgxq-oss/tzgxg/20251015/12bd1526-950d-4353-a065-931ebf760a98-map-type1.png",
        anchor: { x: 0.5, y: 1 }, // 添加锚点配置，使图标底部居中
        title: org.name,
        callout: {
          content: org.name,
          display: "BYCLICK",
          color: "#242B3B",
          fontSize: 14,
          borderRadius: 4,
          bgColor: "#ffffff",
          padding: 8,
        },
      };
    })
    .filter(Boolean); // 过滤掉无效的标记点
});

// 处理地图区域变化事件
const handleRegionChange = (e) => {
  console.log("检测到地图区域变化:", e);

  // 只在缩放结束时获取缩放比
  if (e.type === "end") {
    console.log("缩放结束，尝试获取缩放比");

    // 确保mapContext已初始化
    if (!mapContext) {
      // _this 必须传，都则success和fail回调函数都不会调用
      mapContext = uni.createMapContext("wx-map-instance", _this);
    }

    // 使用mapContext获取缩放比
    mapContext.getScale({
      success: (res) => {
        if (res && res.scale) {
          // 更新当前地图缩放级别
          currentMapScale.value = res.scale;
        }
      },
      fail: (err) => {
        console.error("获取缩放比失败:", err);
      },
    });
  }
};

onMounted(() => {
  // 初始化地图上下文 _this 必须传，都则success和fail回调函数都不会调用
  mapContext = uni.createMapContext("wx-map-instance", _this);

  // 组件挂载时尝试获取一次初始缩放比
  mapContext.getScale({
    success: (res) => {
      if (res && res.scale) {
        currentMapScale.value = res.scale;
      }
    },
    fail: (err) => {
      console.error("获取初始缩放比失败:", err);
    },
  });
});
</script>
<style scoped lang="scss">
.wx-map {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>