用谷歌地圖CSS3圓角

我想在谷歌地圖上應用使用css3 border-radius屬性的圓角邊框，但它不適用於Chrome，在其他瀏覽器中它的工作很棒。任何想法或建議嗎？在這裏，我把我的代碼，並等待積極的答覆。謝謝用谷歌地圖CSS3圓角

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

來源

2013-04-30 Rajnikanth

-1

儘管我們想要，我們目前還不能。

另一種方法是在每個角上覆蓋圓角切口，使其看起來像是圓角。基本上創建一個圓角正方形，倒置它，使其成爲一個切出的形狀，分成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.

來源

2013-04-30 05:02:27 Jared

-1

你將不得不找出一個替代解決方案作爲谷歌地圖V3不支持您正在嘗試使用邊界半徑財產的使用。

來源

2013-04-30 06:07:36

如果你想在不使用任何圖像的情況下達到同樣的效果，這裏是jsfiddle http://jsfiddle.net/alxscms/3Kv99/的解決方案。如果需要，還可以添加褪色的內邊框，而不會破壞地圖內的導航。

Google maps with rounded corners and border

下面是HTML代碼：我最近在一個項目我正在實施這一想法

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

來源

2013-12-05 20:32:34 alxscms

：

<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）。下面是我如何使它工作的例子...

實時預覽：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; 
}

來源

2014-07-23 20:07:26

這在Chrome瀏覽器上無法使用預覽。 – evolutionxbox 2016-08-03 13:34:13

它似乎正在使用Chrome的當前版本（56.0.2924.87）。 – 2017-03-09 17:47:06

它沒有去我7個月前寫了評論。 – evolutionxbox 2017-03-09 18:01:41

我目前與Safari和Chrome有同樣的問題。我只好把translate3d零爲Chrome添加一個WebKit的掩碼圖像Safari瀏覽器：

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

來源

2015-05-29 07:11:18

它的工作原理！很好的黑客。只有Chrome和Safari需要嗎？ – BenNov 2017-02-02 22:31:09

你要的風格的地圖元素中的格，而不是地圖元素。

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

來源

2015-06-22 15:36:16 Guest1

這應該有更多upvotes。 – phadaphunk 2016-02-24 02:39:35

這工作完美。 – Wjdavis5 2016-08-02 00:07:11

我不得不風格這個div和它的直接子div – 2017-01-13 18:18:25

-1

這在另一個答案提出了，但它在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

來源

2016-08-10 19:11:00 waah

它的工作對我來說，我添加了Z-index屬性：

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

來源

2017-02-14 16:14:18 16am

用谷歌地圖CSS3圓角

回答

相關問題