google-maps - CSS3圆角与谷歌地图

Question

我正在尝试在 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>

score 31 · Accepted Answer

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

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

score 21 · Accepted Answer

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

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

score 9 · Accepted Answer

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

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

score 7 · Accepted Answer

如果你想在不使用任何图像的情况下达到相同的效果，这里有一个关于 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;
  }
}

score 4 · Accepted Answer

我发现有用的是agm map环绕 adiv并更改divCSS 以提供圆角。

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

score 1 · Accepted Answer

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

实时预览：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;
}

score -1 · Accepted Answer

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

score -1 · Accepted Answer

这是在另一个答案中提出的，但它z-index:1在 CSS 中遗漏了，所以即使在 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

score -1 · Accepted Answer

-1

如果您使用引导程序 4，则可以添加类舍入。使用 v3 地图为我工作。

于 2018-04-26T17:36:13.630 回答

score -3 · Accepted Answer

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

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

10 回答 10

Related

Reference