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

为什么?

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

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

本站QQ群:291616564 麻辣GIS

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

微信捐助麻辣GIS 支付宝捐助麻辣GIS

如果本文对您有所帮助,欢迎对我们团队进行打赏捐助,让我们在传播3S的路上可以走得更远。


作者:,GIS爱好者。
分享本文,请您带上本文链接

发表评论