Uniapp map组件无法叠加图层问题 解决方案, 实现添加覆盖物、叠地图，图层可随地图缩放。用于气象服务（雷达图、卫星图、云层图等）

最近使用 uni-app 做气象服务系统，有个主要需求是给地图叠上 雷达图、卫星图、云层、降雨等，其中还需要动态轮播。

本来是一个很简单的操作，直接叠上覆盖物即可，但是查看官方api发现没有这个功能，在网上查找一番，什么使用marker替代、固定静态图片、使用第三方地图api等 也都不是很好的解决方案。只好暂且搁置，先进行其他业务开发。

最近重新进行研究，发现可以使用微信原生的 addGroundOverlay 方法进行叠加覆盖物操作，简单测试了一下，暂且是可行的，故记录一下。

注：微信开发者工具 模拟器无法显示，只有预览或真机调试才能看到

下面是 demo测试的代码

<template>
  <map
      id="map"
      :longitude="mapCenter.longitude"
      :latitude="mapCenter.latitude"
      :scale="mapCenter.scale"
      class="map-style"
  >
 
  </map>
</template>
 
<script setup lang="ts">
import { ref, onMounted } from "vue";
 
const mapCenter = ref({ longitude: 113.5, latitude: 22.5, scale: 6 });
const mapContext = ref<WechatMiniprogram.MapContext>();
 
onMounted(() => {
  mapContext.value = uni.createMapContext('map', { this: mapContext });
  addGroundOverlay();
});
 
// 添加自定义图片图层的方法
const addGroundOverlay = () => {
  if (mapContext.value) {
    console.log("自定义添加图层");
    mapContext.value?.addGroundOverlay({
      id: 1,
      src: '/static/images/layer/大风图层.png', 
      bounds: {
        southwest: {
          longitude: 109.6,
          latitude: 20.2
        },
        northeast: {
          longitude: 117.5,
          latitude: 25.6
        }
      },
      visible: true, // 注意 visible，不是visiable
      zIndex: 1000,
      success: () => {
        console.log('成功');
      },
      fail: (e : any) => {
        console.log('失败', e);
      }
    });
  } else {
    console.error('地图上下文未准备好');
  }
};
 
</script>
 
<style>
.map-style {
  height: 100vh;
  width: 100%;
}
</style>