在vue里面引用百度地图中心点偏移到左上角(0,0)解决方法

在vue里面引用百度地图后,发现无论怎么调整断后不能将中心点放到最中间的位置,总会偏移一部分,效果,如下图....

偏移图片

然后呢,我就打开控制台,查看dom位置.发现一个奇怪的现象,百度地图的区域的位置会有一块在左上角的位置,大概就是显示地图上下各偏移一半的位置..

然后呢,我就上百度搜索相关问题,都说是dom加载顺序的问题
原因就是呢:因为呢,这是一个弹出框状态,原先的dom宽高均为0,中心也是(0,0),因此,中心点位置就会显示在左上角了,当然了,解决办法也很简单,延时加载dom就可以了

<baidu-map
                v-if="mapShow" //这个控制显示和隐藏
                class="bm-view"
                :center="center"
                :zoom="zoom"
                :scroll-wheel-zoom="true"
                @ready="createMap"
              >

js操作(在打开弹出框的同时,添加以下逻辑就行了)

 setTimeout(() => {
        this.mapShow = true
      }, 0)

记录一下,以防以后忘记

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容