VUE中百度地图marker不在中心点

页面逻辑：点击查看地图，打开下方地图显示

image.png

image.png

问题：地图上的marker在div的左上角0,0点处，未在页面中间。需求是要让marker显示在页面中间
分析：地图上的marker点必须在地图div可视情况下才会在div的中心，所以地图div的宽高必须是固定值，为达到效果，可以控制外层div的height、overflow以达实现显示、隐藏地图
解决方案：

<span @click="showMap()" v-show="hideMapBtn" style="color: #0a9bff;cursor: pointer">查看地图</span>
<span @click="hideMap()" v-show="showMapBtn" style="color: #0a9bff;cursor: pointer">关闭地图</span>

地图外层div,设置 height:0px、overflow:hidden

<el-col :style="{width: 680+'px',height: mapStyle.height,overflow: mapStyle.overflow,marginTop: 10+'px'}">
    <div id="allmap" style="width: 680px;height: 400px"/>
 </el-col>

default的值：

data() {
    return {
      showMapBtn:false,
      hideMapBtn: true,
      mapStyle: {
        width: '680px',
        height: '0',
        overflow: 'hidden'
      },
  }
}

当点击“查看地图”按钮时,重置height、overflow,并重新加载一次地图

//显示地图
showMap(){
  this.showMapBtn = true;
  this.hideMapBtn = false;
  this.mapStyle.overflow = 'auto';
  this.mapStyle.height = '400px';
  //加载地图
  this.baiduMap()
},

当点击“关闭地图”按钮时,重置height、overflow

//隐藏地图
hideMap(){
  this.hideMapBtn = true;
  this.showMapBtn = false;
  this.mapStyle.overflow = 'hidden';
  this.mapStyle.height = '0';
},

最终结果：

image.png