解决模态框中的地图打开后中心点偏向左上角的问题

最新推荐文章于 2023-09-08 19:50:10 发布

叶子yes

最新推荐文章于 2023-09-08 19:50:10 发布

阅读量372

点赞数 2

分类专栏：前端 vue 地图文章标签：前端 vue.js javascript Powered by 金山文档

本文链接：https://blog.csdn.net/lq313131/article/details/128827175

版权

前端同时被 3 个专栏收录

63 篇文章 7 订阅

订阅专栏

vue

15 篇文章 1 订阅

订阅专栏

地图

1 篇文章 0 订阅

订阅专栏

<template>
  <div>
    <button @click="mapModal=true">打开地图模态框</button>
    <Modal
      class="modal"
      width='60%'
      v-model="mapModal"
      :mask-closable='false'
      >
      <div id = "container"></div>
    </Modal>
  </div>
</template>

<script>
export default {
  data(){
    return {
      mapModal: false,
      map: null
    }
  },
  methods:{
    initMap(){
      this.map = new BMapGL.Map("container", {enableMapClick:false}); // 创建Map实例,GL版命名空间为BMapGL(鼠标右键控制倾斜角度)
        this.map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);      // 初始化地图,设置中心点坐标和地图级别
      this.map.enableScrollWheelZoom(true);                               // 开启鼠标滚轮缩放
    }
  },
  mounted(){
    this.initMap()
  }
}
</script>

<style>
button{
  margin-left: 320px;
}
#container{
  width: 100%;
  height: 450px;
}
</style>

上述代码我们设置了北京为地图的中心点，但是当我们打开模态框时会发现北京偏向了左上角，如下图所示：

出现这个问题的原因是地图初始化是在mounted生命周期进行的，也就是说模态框还没有被打开就加载好地图了，而此时模态框的宽高是0，因此地图的中心点就会出现在左上角。

因此我们需要等模态框打开后，有了宽高再去加载地图：

所以initMap方法不能在mounted生命周期去执行，而要在模态框打开后再去执行，同时要注意要使用setTimeout进行异步加载：

mapOpen(){
  this.mapModal = true
  setTimeout(()=>{
    this.initMap()
  })
},

完整代码：

<template>
  <div>
    <button @click="mapOpen">打开地图模态框</button>
    <Modal
      class="modal"
      width='60%'
      v-model="mapModal"
      :mask-closable='false'
      >
      <div id = "container"></div>
    </Modal>
  </div>
</template>

<script>
export default {
  data(){
    return {
      mapModal: false,
      map: null
    }
  },
  methods:{
    mapOpen(){
      this.mapModal = true
      setTimeout(()=>{
        this.initMap()
      })
    },
    initMap(){
      this.map = new BMapGL.Map("container", {enableMapClick:false}); // 创建Map实例,GL版命名空间为BMapGL(鼠标右键控制倾斜角度)
        this.map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);      // 初始化地图,设置中心点坐标和地图级别
      this.map.enableScrollWheelZoom(true);                               // 开启鼠标滚轮缩放
    }
  },
  mounted(){
    // this.initMap()
  }
}
</script>

<style>
button{
  margin-left: 320px;
}
#container{
  width: 100%;
  height: 450px;
}
</style>

此时就可以让地图中心点显示在中心了：