在el-dialog中添加百度地图不加载的问题

<template>
  <div>
    <el-button @click="ceshi">弹出</el-button>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
        <div id="l-map" style="height: 600px"></div>

    </el-dialog>
    
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false
      
    };
  },
  methods: {
    ceshi(){
      this.dialogVisible = true

       // 后加载地图
      setTimeout(() => {
        this.baiduMap()
      }, 0);
    },
    baiduMap(){
      var map = new BMap.Map("l-map");
      map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
      map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
      map.centerAndZoom("北京", 12); // 初始化地图,设置城市和地图级别。
    }
  },
  mounted() {
   this.baiduMap()
  },
};
</script>