vue3中vue-baidu-map的中心点在左上角的问题

vue3中安装vue-baidu-map。官网：http://map.heifahaizei.com/doc/begin/install.html

npm i vue-baidu-map-3x

需求：点击不同的东西，来获取相应的坐标，展示出对应的坐标的位置。

问题：第一次点击出现的地图在中心标记，之后更换其他坐标点的时候，出现在左上角。

解决思路：通过定时器给地图的大组件一个v-if的变量，在关闭弹框的时候为false，打开的时候为true。

vue3的dialog弹框：close关闭的时候触发的事件

 上代码：

<el-dialog
    v-model="visibleMapDialog"
    title="设备位置"
    width="50%"
    @close="mapClose"
  >
    <baidu-map
      v-if="mapShow"
      class="map"
      :scroll-wheel-zoom="true"
      :center="{ lng: center.lng, lat: center.lat }"
      :zoom="15"
      style="height: 500px"
    >
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
      <bm-marker :position="center" :dragging="true">
      </bm-marker>
    </baidu-map>
  </el-dialog>

<script setup>
import {
  ref,
  nextTick,
} from "vue";

let visibleMapDialog = ref(false);
let mapShow = ref(false);
const center = ref({
  lng: 0,
  lat: 0,
});
function showMapDialog(longitude, latitude) {
  nextTick(() => {
    center.value.lng = longitude;
    center.value.lat = latitude;
  });
  setTimeout(() => {
    mapShow.value = true;
  }, 100);

  visibleMapDialog.value = true;
}
function mapClose() {
  mapShow.value = false;
}
</script>