Vue3+Typescript在表单中不显示高德地图??

Question

VUe3+Typescript调用高德地图 在普通页面显示 但是放在el-form表单中就不显示...求大神解答..
报错为下图: 说坐标无效, 但是同样的代码 地图组件放在el-form外面就可以显示

下面是地图组件的代码

<template>
  <div style="height: 100%;">
    <div id="container2"></div>
  </div>
</template>

<script setup lang="ts">
import AMapLoader from '@amap/amap-jsapi-loader'
import { nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  lat: {
    type: Number,
    default: 0
  },
  lng: {
    type: Number,
    default: 0
  },
  isbig: {
    type: Boolean,
    default: false
  },
  isbigsave: {
    type: Boolean,
    default: false
  },
  center: {
    type: Array,
    default: () => []
  },
  coordinates: {
    type: Array,
    default: () => []
  }
})

let map:any = null
const mapBig = ref(null)
const marker = reactive({})
let geocoder:any = {}
const geolocation = reactive({})
const lnglatsBig = reactive([])
let AMap:any = null
let centerLocal:any = []
let infoWindow: any = null
// const storeState: any = reactive({
//       places: []
// })

let markers: any = reactive([])

onMounted(() => {
  centerLocal = props.center
  // DOM初始化完成进行地图初始化
  nextTick(() => {
    initMap()
  })
})

onBeforeUnmount(() => {
  map && map.destroy()
})

function newMapInstance (center: any = []) {
  map = new AMap.Map('container2', {
    expandZoomRange: true,
    // 设置地图容器id
    viewMode: '3D', // 是否为3D地图模式
    zoom: 10, // 初始化地图级别
    zooms: [9, 20], // 初始化地图级别
    center: [109.314545, 23.964934], // 初始化地图中心点位置
    resizeEnable: true
  })
}
function initMap () {
  const center = centerLocal
  AMapLoader.load({
    key: 'XXXXXXXX', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Geolocation', 'AMap.Geocoder', 'AMap.DistrictSearch'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMapObj: any) => {
      AMap = AMapObj
      newMapInstance(center)
      geocoder = new AMap.Geocoder({
        radius: 500, // 以已知坐标为中心点，radius为半径，返回范围内兴趣点和道路信息
        extensions: 'all' // 返回地址描述以及附近兴趣点和道路信息，默认“base”
      })
    })
    .catch(e => {
      console.log(e)
    })
}

function infoOpen (e: any) {
  infoWindow.setContent(e.target.content)
  infoWindow.open(map, e.target.getPosition())
  return true
}
function infoClose (e: any) {
  infoWindow.close(map, e.target.getPosition())
}
// 鼠标点击事件,设置地图中心点及放大显示级别
function newMAp (e: any) {
  // map.setCenter(e.target.getPosition());
  map.setZoomAndCenter(15, e.target.getPosition())
  infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) })
  infoWindow.setContent(e.target.content)
  infoWindow.open(map, e.target.getPosition())
}
function setCenter (center: any) {
  map.setCenter(center)
}

</script>
<style  scoped>
#container1 {
  width: 100%;
  height: 100%;
}
#container2 .el-dialog__header {
  display: none;
}
</style>

传入的坐标在组件内可以打印出来, 即使不传坐标, 在组件写死坐标也不行.....