CSS3圆角与谷歌地图答案

【问题标题】：CSS3 rounded corner with google mapCSS3圆角与谷歌地图
【发布时间】：2013-04-30 04:11:36
【问题描述】：

我正在尝试在 Google 地图中使用 css3 边框半径属性应用圆角边框，但它在 chrome 中不起作用，在其他浏览器中它的效果很好。有什么想法或建议吗？我在这里放我的代码并等待肯定的答复。谢谢

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Testing</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<style type="text/css" >
#map {
    position: absolute; 
    top: 120px; 
    left: 0; 
    right: 0; 
    bottom:0; 
    z-index: 1; 
    overflow: hidden;
    border:solid 3px #00FF33; 
    border-radius:15px; 
    width: 500px; 
    height: 200px; 
    margin:0 auto;  
    -moz-border-radius:15px;
    -webkit-mask-border-radius:15px;
    -webkit-border-radius:15px;
}
#wrapper {
        position:absolute; 
}
</style>
<div id="wrapper">
  <div id="map" ></div>
</div>
<script type="text/javascript">
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  var infowindow = new google.maps.InfoWindow();
    var i,marker;
    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: 'marker_icon.png',
        borderRadius: 20,
        animation: google.maps.Animation.DROP
      });

      google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]+' <img src="map-pin.png" /> <div style="background:#090;height:100px;width:200px;">yeah its working perfect ..!!!</div><a href="http://www.google.com">Google</a><form><a href="javascript: alert(\'foo!\');">Click Me</a></form>');
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>

【问题讨论】：

标签： google-maps css

【解决方案1】：

我目前在使用 Safari 和 Chrome 时遇到了同样的问题。我不得不将 Chrome 的 translate3d 设置为零，并为 Safari 添加一个 webkit-mask-image：

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

【讨论】：

有效！不错的黑客。是不是只有 Chrome 和 Safari 才需要？
我只是使用了 safari 部分来解决我的地图忽略父 div 的边界半径的问题（通过将掩码添加到父级提高了几个级别。非常感谢，我没有主意

【解决方案2】：

您必须在地图元素中设置 div 的样式，而不是在地图元素中。

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

【讨论】：

我必须同时设置该 div 及其直接子 div 的样式
我没有像@guss-hogg-blake 所说的那样将其设置为直接孩子的div，而是将overflow: hidden;添加到上面的css中。
溢出：隐藏；根据@Terrabythia 的评论为我工作。
完美答案。干净，没有黑客。这甚至解决了缩放时该死的闪烁问题。非常感谢。

【解决方案3】：

当我添加 z-index 属性时，它对我有用：

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

【讨论】：

【解决方案4】：

如果你想在不使用任何图像的情况下达到同样的效果，这里有jsfiddle上的解决方案http://jsfiddle.net/alxscms/3Kv99/。如果您愿意，您还可以添加褪色的内边框，而不会破坏地图内的导航。

这里是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>

以及样式（scss）：

$radius: 10px;
$thickness: 5px;
$border-color: rgba(black, 0.15);
$background-color: white;

.wrapper {
  position: relative;
  width: 400px;
  height: 200px;
  overflow: hidden;
  margin: 50px;

  & > i {
    display: block;
    position: absolute;

    &.top {
      top: 0;
      border-top: $thickness solid $border-color;
      &:after {
        top: -$radius/2 - $thickness;
        border-top: $radius/2 solid $background-color;
      }
    }
    &.right {
      right: 0;
      border-right: $thickness solid $border-color;
      &:after {
        right: -$radius/2 - $thickness;
        border-right: $radius/2 solid $background-color;
      }
    }
    &.bottom {
      bottom: 0;
      border-bottom: $thickness solid $border-color;
      &:after {
        bottom: -$radius/2 - $thickness;
        border-bottom: $radius/2 solid $background-color;
      }
    }
    &.left {
      left: 0;
      border-left: $thickness solid $border-color;
      &:after {
        left: -$radius/2 - $thickness;
        border-left: $radius/2 solid $background-color;
      }
    }

    &.top:not(.right):not(.left),
    &.bottom:not(.right):not(.left) {
      height: $thickness;
      left: $radius+$thickness;
      right: $radius+$thickness;
    }

    &.left:not(.top):not(.bottom),
    &.right:not(.top):not(.bottom) {
      width: $thickness;
      top: $radius+$thickness;
      bottom: $radius+$thickness;
    }

    &.top.right,
    &.top.left,
    &.bottom.right,
    &.bottom.left {
      width: $radius;
      height: $radius;

      &:after {
        content:"";
        position: absolute;
        width: 1.5*$radius;
        height: 1.5*$radius;
      }
    }

    &.top.right {
      border-top-right-radius: $radius;
      &:after { border-top-right-radius: 1.5*$radius; }
    }
    &.top.left {
      border-top-left-radius: $radius;
      &:after { border-top-left-radius: 1.5*$radius; }
    }
    &.bottom.right {
      border-bottom-right-radius: $radius;
      &:after { border-bottom-right-radius: 1.5*$radius; }
    }
    &.bottom.left {
      border-bottom-left-radius: $radius;
      &:after { border-bottom-left-radius: 1.5*$radius; }
    }
  }
}

#map {
  width: inherit;
  height: inherit;
  .gmnoprint {
    display: none;
  }
}

【讨论】：

【解决方案5】：

我发现有用的是将agm map 包裹在div 周围并更改div CSS 以提供圆角。

.map {
  height: 391px;
  width: 784px;
  display: inline-block;
  border-radius: 24px;
  overflow: hidden;
}

<div style="text-align: center;">
  <div class="map">
    <agm-map [zoom]="15" [latitude]="latitude" [longitude]="longitude">
      <agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>
    </agm-map>
  </div>
</div>

【讨论】：

是的，我只需要overflow: hidden 这就是魔术。谢谢。

【解决方案6】：

我最近在我正在从事的一个项目中实现了这个想法。这是我如何使其工作的示例...

实时预览：http://jsfiddle.net/h6Tkq/

HTML...

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

使用以下 CSS...

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

【讨论】：

它似乎在 Chrome 的当前版本 (56.0.2924.87) 中工作。
我在 7 个月前写了那条评论。

【解决方案7】：

您必须找到替代解决方案，因为 Google Map v3 不支持您尝试使用的边界半径属性。

【讨论】：

【解决方案8】：

这是在另一个答案中提出的，但它在 CSS 中错过了z-index:1，所以即使在 JSFiddle 中它也不起作用。

HTML 是：

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

还有 CSS：

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

JSFiddle

【讨论】：

【解决方案9】：

如果您使用 bootstrap 4，则可以添加四舍五入的类。使用 v3 地图为我工作。

【讨论】：

【解决方案10】：

尽管我们想这样做，但目前我们做不到。

另一种方法是在每个角上覆盖圆角切口，使其看起来像圆角。基本上创建一个圆角正方形，将其反转，使其成为一个切口形状，分成 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.

【讨论】：