请具体描述问题出现的流程，并提供能复现问题的简单代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）。

<template>
  <div class="" ref="mapPage">
    <s-header :back="false" :background="conf.header.background" backText="" title="地图" color="#fff" />
    <map
        class="map"
        id="map"
        :latitude="location.latitude"
        :longitude="location.longitude"
        :markers="markers"
      >
      </map>
  </div>
</template>


<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { onMounted, onUnmounted, ref, reactive, nextTick, watch } from "vue"
import ApiUser from '~/api/ApiUser'
import CUser from '~/store/CUser'
import { imgBaseUrl } from '~/utils/config'


// 创建自定义样式的图标
const conf = reactive({
  header: {
    background: '#63BED0'
  }
})
const mapPage = ref<any>(null)
const scale = ref(10.5)
const location= ref({
    latitude: 39.991104,
    longitude: 116.377503,
})


const markers = ref([
{
      id: 1,
      latitude: 22.720883956756303,
      longitude: 114.08409655692533,
      joinCluster: true,
      width: 24,
      height: 24,
      iconPath:  imgBaseUrl+'map/point-red.png'
    },{
      id: 2,
      latitude: 22.746092441888514,
      longitude: 114.09979733772285,
      joinCluster: true,
      width: 24,
      height: 24,
      iconPath:  imgBaseUrl+'map/point-red.png'
    },{
      id: 3,
      latitude: 22.690677266436236,
      longitude: 114.1013920681209,
      joinCluster: true,
      width: 24,
      height: 24,
      iconPath:  imgBaseUrl+'map/point-red.png'
    },{
      id: 9,
      latitude: 22.626980627299076,
      longitude: 113.9763082398972,
      joinCluster: true,
      width: 24,
      height: 24,
      iconPath:  imgBaseUrl+'map/point-red.png'
    },{
      id: 4,
      latitude: 40.040417,
      longitude: 116.373514,
      joinCluster: true,
      width: 24,
      height: 24,
      iconPath:  imgBaseUrl+'map/point-red.png'
    },{
      id: 5,
      latitude: 39.953416,
      longitude: 116.380945,
      joinCluster: true,
      width: 24,
      height: 24,
      iconPath:  imgBaseUrl+'map/point-red.png'
    },{
      id: 6,
      latitude: 39.984104,
      longitude: 116.307503,
      joinCluster: true,
      width: 24,
      height: 24,
      iconPath:  imgBaseUrl+'map/point-red.png'
    },{
      id: 7,
      latitude: 39.908802,
      longitude: 116.397502,
      joinCluster: true,
      width: 24,
      height: 24,
      iconPath:  imgBaseUrl+'map/point-red.png'
    },{
      id: 8,
      latitude: 40.040417,
      longitude: 116.273514,
      joinCluster: true,
      width: 24,
      height: 24,
      iconPath:  imgBaseUrl+'map/point-red.png'
    }
])


onMounted(() => {
  const mapCtx = wx.createMapContext('map', this);
    mapCtx.initMarkerCluster({
      gridSize:30,
      zoomOnClick: true
    });


    // 自动调整视野
  setTimeout(() => {
    mapCtx.includePoints({
      points: markers.value.map(m => ({
        latitude: m.latitude,
        longitude: m.longitude
      })),
      padding: { left: 40, right: 40, top: 100, bottom: 40 },
      success: () => {
        console.log(111111);
      },
      fail: (err: any) => {
        console.log(err, 2222222);
      }
    })
  }, 5000) // 添加适当延时确保地图初始化完成


})


onLoad(() => {
  
})
</script>
<style lang="less" scoped>


.map {
  width:100%;
  height:calc(100vh - 40rpx);
  position: relative;
}
</style>

上代码，怎么个无效？