高德/百度地图(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问答 提问。
本站QQ群:291616564 麻辣GIS
微信公众号:malagis,扫描二维码直接关注。

打赏¥1

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

发表评论