百度地图元素宽度自适应的方法

在使用Vue框架搭建网站时，其中有一网页用于展示坐标点，使用Vue Baidu Map进行数据的绑定，地图初始时，宽度必须要设定，否则无法完成地图渲染。在<baidu-map>标签中设置style属性值如下：

<div id="map">
<baidu-map :style="{width:map.width,height:map.height}" />
</div>

在地图初始函数handler中设置地图的初始值，

this.map.width = document.getElementById("map").clientWidth +'px';
this.map.height = document.getElementById("map").clientHeight +'px';

当点击折叠菜单按钮时，通过获取元素map的宽度来刷新地图的宽度。但是尝试几个方法来设置都失败，最终将子元素宽度设置为100%后，地图宽度得以屏幕自适应，仰天一叹 😦 ：吃了没有详细看CSS的亏。

首先看一下我都尝试了哪些操作。

一、计算方法

1.1 监听折叠按钮的变化，获取map的值

  collapsed: function (val){

      console.log('current map width', document.getElementById("map").clientWidth);

      this.bigWidth = 1051 +'px';

      if(val){

        this.smallWidth = document.getElementById("map").clientWidth +'px';

      }else{
        this.bigWidth = document.getElementById("map").clientWidth +'px';
      }

      if(val){

        this.map.width = this.bigWidth;

      }else{

        this.map.width = this.smallWidth;
      }

    },

结论：当监听到折叠按钮变化时，直接获取的是未进行更新的DOM元素的值，因此我还设置了宽度值，因为第一次获取的时候是undefined。

1.2 监听map元素的resize变化，更新地图的宽度

import elementResizeDetectorMaker from "element-resize-detector";//导入该库

let that = this;
let elements = [];
elements.push(document.getElementById("map"));
elementResizeDetectorMaker().listenTo(elements,() => {
  that.map.width = document.getElementById("map").clientWidth;
  console.log(that.map.width);
});

结论：虽然能够取到折叠后的宽度，但是设置不生效，原因未知（估摸着是浏览器渲染问题，待深入研究其机理再分析，本文先提供几个试错的样本，避免再走弯路）。

1.3 延时更新map元素宽度

let  that = this;
setTimeout(()=>{
  that.map.width =  document.getElementById("map").clientWidth;
  console.log('setTimeout',that.map.width);
},1200);

结论：同1.2。

二、极简方法

通过style属性，将子元素宽度设置为100%。

:style="{width:'100%',height:map.height}