页面逻辑：点击查看地图，打开下方地图显示
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
