Question

我正在尝试在Google地图中使用带有css3 border-radius属性的圆角边框，但它不适用于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>

Answer 1

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

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

Answer 2

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

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

Answer 3

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

Google maps with rounded corners and border

以下是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;
  }
}

Answer 4

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

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

Answer 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>

Answer 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;
}

Answer 7

尽可能多，我们目前不能。

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

Answer 8

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

Answer 9

这是在另一个答案中提出的，但它在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

Answer 10

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

CSS3圆角与谷歌地图

10 个答案: