高德/百度地图（JavaScript）绘制自适应正方形地图容器

       在使用高德地图或者百度地图的JavaScript API的时候都要事先在HTML文件中创建一个div的标签，然后所有的地图绘制工作都会在这个标签中进行，我们可以把这个标签暂称为地图容器。怎样绘制一个正方形的地图容器呢？

       假设代码如下：

<div id="mapContainer">

</div>

       在PC端做这个事情简单的很，只要使用类似下面的语句就好

#mapContainer {

  width: 320px;

  height: 320px;

}

       可是移动端页面宽度有限，我们希望地图大小是正方形，并且边长为屏幕的95%，那怎么办？怎么绘制一个正方形的地图？其实这就是一个CSS的问题。

       方法一： 使用vw单位

       这应该是最容易理解的方法，CSS3 增加了基于可视区域百分比的长度单位 vw, vh, vmin, vmax。 vw 是相对于视口宽度百分比的单位。详细可以参考：

http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/

       所以写法就是：

#mapContainer {

  width: 95%;

  height: 95vw;

}

       使用这种方法的好处是简单容易理解，不过会有兼容性问题，可以参考：这里

       方法二： padding-bottom的秒用

       这种方法先上代码

#mapContainer {

  width: 95%;

  padding-bottom: 95%;

}

       这种方案也很简洁，且兼容性好，不过如果#mapContainer里有内容，可能会被撑开，所以最好加上一句 height:0，也就是

#mapContainer {

  width: 95%;

  padding-bottom: 95%;

  height: 0;

}

       方法三： 伪类及margin的秒用

       也先上代码：

#mapContainer {

  width: 95%;

  overflow: hidden;

}

#mapContainer:after {

  content: '';

  display: block;

  margin-top: 100%;

}

       这种方案利用了 margin 百分比相对父元素宽度计算的特性实现。

       效果图

       有其他方法也欢迎补充。