Google maps CSS3圆角与谷歌地图

我试图在谷歌地图中使用css3边界半径属性应用圆形边界，但在chrome中不起作用，在其他浏览器中效果很好。 有什么想法或建议吗？在这里，我把我的代码和等待积极的答复。 谢谢

谷歌地图测试
#地图{
位置：绝对位置；
顶部：120px；
左：0；
右：0；
底部：0；
z指数：1；
溢出：隐藏；
边框：实心3px#00FF33；
边界半径：15px；
宽度：500px；
高度：200px；
保证金：0自动；
-moz边界半径：15px；
-webkit掩码边界半径：15px；
-webkit边界半径：15px；
}
#包装纸{
位置：绝对位置；
}
var map=new google.maps.map（document.getElementById（'map'）{
缩放：10，
中心：新谷歌地图LatLng（-33.92151.25），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var infowindow=new google.maps.infowindow（）；
varⅠ，标记；
对于（i=0；i

尽管我们很想，但我们目前无法做到

另一种方法是在每个角上覆盖圆角切口，使其看起来像是圆角。基本上，创建一个圆角正方形，将其倒置，使其成为一个切口形状，分成4个角块，将每个角放置在父容器内

范例

.container { width: 400px; height: 300px; position: relative; }
.map { width: 100%; height: 100%; }
.corner { width: 30px; height: 30px; position: absolute; background-image: url(my/corners.png) }
.corner.topleft { top: 0; left: 0; background-position: 0 0; }
.corner.topright, etc.

---

您必须找到另一种解决方案，因为Google Map v3不支持使用您尝试使用的border radius属性。

如果您想在不使用任何图像的情况下实现相同的效果，这里有一个关于JSFIDLE的解决方案。如果愿意，您还可以添加褪色的内边框，而不会破坏地图内部的导航

以下是html的代码：

<div class="wrapper">
    <div class="map" id="map"></div>
    <i class="top"></i>
    <i class="right"></i>
    <i class="bottom"></i>
    <i class="left"></i>
    <i class="top left"></i>
    <i class="top right"></i>
    <i class="bottom left"></i>
    <i class="bottom right"></i>
</div>

---

我最近在一个项目中实现了这个想法。这是一个我如何使它工作的例子

现场预览：

HTML

<div class="map" id="map"></div>

---

我目前在Safari和Chrome上也有同样的问题。我必须为Chrome将translate3d设置为零，并为Safari添加一个webkit掩码图像：

-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-mask-image: -webkit-radial-gradient(white, black);

---

必须在map元素中设置div的样式，而不是在map元素中

map > div {
    border-radius: 10px;
}

---

这是在另一个答案中提出的，但是在CSS中它没有

z-index:1

，所以即使在JSFIDLE中它也不起作用

HTML是：

    <div class="map" id="map"></div>

---

当我添加z-index属性时，它对我起了作用：

#map {
    ...
    -webkit-border-radius:20px;
    z-index:0;
}

---

如果使用Bootstrap4，则可以添加类舍入。我用v3地图工作。

我发现有用的是将

agm地图

环绕在

div

周围，并更改

div

CSS以提供圆角

.map{
身高：391px；
宽度：784px；
显示：内联块；
边界半径：24px；
溢出：隐藏；
}

我必须设计该div及其直接子div的样式，而不是像@guss hogg blake所说的那样将其设置为直接子div，我添加了

溢出：隐藏

到上面的css.overflow：隐藏；根据@Terrabythia的评论为我工作。完美答案。干净，没有污点。这甚至修复了缩放时该死的闪烁问题。非常感谢。它很有效！干得好。只是Chrome和Safari才需要它吗？我刚刚使用了这篇文章的Safari部分来解决一个问题，我的地图忽略了父div的边界半径（通过向父div添加掩码提高了两个级别。非常感谢，我没有ideasIt，它似乎在当前版本（56.0.2924.87）中工作）我在7个月前写了这篇评论，但它并没有消失。

map > div {
    border-radius: 10px;
}

    <div class="map" id="map"></div>

#map {
    width: 500px;
    height: 200px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    z-index: 1;
}

#map {
    ...
    -webkit-border-radius:20px;
    z-index:0;
}