Zaokrąglony narożnik CSS3 z mapą google

Próbuję zastosować zaokrągloną granicę przy użyciu właściwości css3 border-radius w mapie Google, ale nie działa ona w chrome, w innej przeglądarce jej praca jest świetna. Wszelkie pomysły lub sugestie? Tutaj umieszczam mój kod i czekam pozytywną odpowiedź. DziękiZaokrąglony narożnik CSS3 z mapą google

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

Źródło

2013-04-30 Rajnikanth

-1

Tak długo jak chcemy, obecnie nie możemy.

Alternatywą są nakładające się zaokrąglone narożniki na każdym z rogów, aby wyglądały jak zaokrąglone rogi. Zasadniczo utwórz zaokrąglony kwadrat, odwróć go, aby stał się wyciętym kształtem, podziel na 4 części narożne, umieść każdy narożnik w kontenerze nadrzędnym.

Przykład

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

Źródło

2013-04-30 05:02:27 Jared

-1

Będziesz musiał dowiedzieć się alternatywne rozwiązanie jak Google Map v3 nie wspiera wykorzystanie własności border-radius którego próbujesz użyć.

Źródło

2013-04-30 06:07:36

Jeśli chcesz osiągnąć ten sam efekt bez użycia żadnego obrazu, tutaj jest rozwiązanie na jsfiddle http://jsfiddle.net/alxscms/3Kv99/. Możesz także dodać wyblakłą wewnętrzną granicę, jeśli chcesz, bez naruszania nawigacji wewnątrz mapy.

Google maps with rounded corners and border

Oto kod 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>

i styl (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; 
    } 
}

Źródło

2013-12-05 20:32:34 alxscms

Niedawno wdrożony ten pomysł w projekcie byłem w pracy . Oto przykład, jak zrobiłem to działa ...

Podgląd obrazu na żywo: http://jsfiddle.net/h6Tkq/

HTML ...

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

z następującymi CSS ...

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

Źródło

2014-07-23 20:07:26

ten nie działa przy użyciu podglądu w chrome. – evolutionxbox

Wygląda na to, że działa w bieżącej wersji (56.0.2924.87) przeglądarki Chrome. –

To nie poszło, napisałem ten komentarz 7 miesięcy temu. – evolutionxbox

Obecnie mam ten sam problem z przeglądarkami Safari i Chrome. Musiałem położyć translate3d do zera dla Chrome i dodać WebKit maski zdjęcie Safari:

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

Źródło

2015-05-29 07:11:18

To działa! fajny hack. Czy jest to potrzebne tylko w Chrome i Safari? – BenNov

Trzeba styl div wewnątrz elementu mapy, a nie element mapy.

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

Źródło

2015-06-22 15:36:16 Guest1

to powinno mieć więcej głosów upvotes. – phadaphunk

to działało idealnie. – Wjdavis5

Musiałem stylizować zarówno ten div, jak i jego bezpośrednie div –

-1

ta została zaproponowana w innej odpowiedzi, ale brakowało z-index:1 w CSS więc nawet w JSFiddle to nie działa.

HTML jest:

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

I CSS:

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

JSFiddle

Źródło

2016-08-10 19:11:00 waah

on pracował dla mnie jak dodałem właściwość z-index:

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

Źródło

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

Zaokrąglony narożnik CSS3 z mapą google

Odpowiedz

Powiązane problemy