麻辣GIS微信平台

更多 GIS 干货

微信关注不错过

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

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

假设代码如下:

<div id="mapContainer">
</div>

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

#mapContainer {
  width: 320px;
  height: 320px;
}

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

方法一: 使用vw单位

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

  • 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 百分比相对父元素宽度计算的特性实现。

效果图

有其他方法也欢迎补充。

麻辣GIS-Sailor
作者:
GIS爱好者,学GIS,更爱玩GIS。
微博关注
手机阅读
赞赏支持
手机阅读
微信捐助麻辣GIS
微信打赏
支付宝捐助麻辣GIS
支付宝打赏

声明

1.本文所分享的所有需要用户下载使用的内容(包括但不限于软件、数据、图片)来自于网络或者麻辣GIS粉丝自行分享,版权归该下载资源的合法拥有者所有,如有侵权请第一时间联系本站删除。

2.下载内容仅限个人学习使用,请切勿用作商用等其他用途,否则后果自负。

3.如果本文对您有所帮助,请您对我们团队进行 打赏捐助让我们在传播3S的路上可以走得更远,不胜感激。PS:如果你是学生党,请优先把经费用于购买学习资料 以及 与小哥哥/小姐姐约会上:-)

如您有疑问,可在文末留言,或到QQ群中提问。

本站QQ群(一):291616564 加入QQ群

本站QQ群(二):166408035 加入QQ群

本站QQ群(三):627853279 加入QQ群

本站QQ群(四):436386604 加入QQ群

本站QQ群(五):606176554 加入QQ群

本站QQ群(六):946178380 加入QQ群

本站QQ群(七):861271808 加入QQ群

微信公众号:malagis,扫描右边二维码直接关注。

发表评论