高德/百度地图(JavaScript)使用圆角地图容器
发布时间: 2017-07-12
所属分类: GIS探秘
上文《高德/百度地图(JavaScript)绘制自适应正方形地图容器》中解决了绘制正方形地图容器的问题。但通常设计图为了好看,还会加上了阴影和圆角。阴影倒是好说,直接使用 box-shadow
解决就好。那其实圆角也很简单,直接使用 border-radius
就好啊,但是并不是我们想的那样,即使设置了 border-radius
,在高德地图的 canvas 下,设置的圆角也就找不到了,如图:
解决方案
那要怎样解决呢?目前找到最简单的方法,就是在设置 border-radius
的位置加上这么一行CSS
#mapContainer {
width: 95%;
padding-bottom: 95%;
height: 0;
border-radius: 5px;
transform: translate3d(0,0,0);
}
通过 transform: translate3d(0,0,0);
效果就恢复过来了,可以正常显示圆角
为什么?
目前我也不知道。。。搞明白了后续会更新。
相关阅读
声明
1.本文所分享的所有需要用户下载使用的内容(包括但不限于软件、数据、图片)来自于网络或者麻辣GIS粉丝自行分享,版权归该下载资源的合法拥有者所有,如有侵权请第一时间联系本站删除。
2.下载内容仅限个人学习使用,请切勿用作商用等其他用途,否则后果自负。
手机阅读
公众号关注
知识星球
手机阅读
最新GIS干货
私享圈子
在真机上是没有效果的
2017年07月12日我在写这篇文章的时候是可以的,可能是更新了,也可能你使用的方式和我的不一致。