麻辣GIS微信平台

更多 GIS 干货

微信关注不错过

高德/百度地图(JavaScript)使用圆角地图容器

上文《高德/百度地图(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); 效果就恢复过来了,可以正常显示圆角

为什么?

目前我也不知道。。。搞明白了后续会更新。

麻辣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,扫描右边二维码直接关注。

发表评论