CSS3 abgerundete Ecke mit Google Karte

Ich versuche, abgerundete Grenze mit css3 Grenze-Radius-Eigenschaft in Google Karte anwenden, aber es funktioniert nicht in Chrom, in anderen Browser seine Arbeit großartig. Irgendwelche Ideen oder Vorschläge? Hier stelle ich meinen Code und warte positive Antwort. DankCSS3 abgerundete Ecke mit Google Karte

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

Quelle

2013-04-30 Rajnikanth

-1

So viel wie wir wollen, zur Zeit können wir nicht.

Die Alternative besteht darin, abgerundete Eckausschnitte über den Ecken zu legen, damit die abgerundeten Ecken aussehen. Grundsätzlich erstellen Sie ein abgerundetes Quadrat, invertieren Sie es, so dass es eine ausgeschnittene Form wird, in 4 Eckstücke aufgeteilt, positionieren Sie jede Ecke in einem übergeordneten Container.

Beispiel

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

Quelle

2013-04-30 05:02:27 Jared

-1

Sie eine alternative Lösung wie Google Map v3 erfahren müssen, ist die Verwendung von border-radius Eigenschaft nicht unterstützt, die Sie verwenden möchten.

Quelle

2013-04-30 06:07:36

Wenn Sie den gleichen Effekt ohne die Verwendung eines Bildes erreichen möchten, hier ist eine Lösung auf jsfiddle http://jsfiddle.net/alxscms/3Kv99/. Sie können auch eine verblasste innere Umrandung hinzufügen, ohne die Navigation in der Karte zu unterbrechen. Hier

Google maps with rounded corners and border

ist der Code für den HTML-Code:

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

Und der Stil (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; 
    } 
}

Quelle

2013-12-05 20:32:34 alxscms

ich kürzlich diese Idee in einem Projekt umgesetzt Ich arbeitete an . Hier ist ein Beispiel dafür, wie ich machte es Arbeit ...

Live-Vorschau: http://jsfiddle.net/h6Tkq/

HTML ...

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

Mit dem folgenden CSS ...

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

Quelle

2014-07-23 20:07:26

Diese funktioniert nicht mit Ihrer Vorschau auf Chrome. – evolutionxbox

Es scheint in der aktuellen Version (56.0.2924.87) von Chrome zu funktionieren. –

Es ist nicht gegangen Ich schrieb diesen Kommentar vor 7 Monaten. – evolutionxbox

Ich hatte zur Zeit das gleiche Problem mit Safari und Chrome. Ich musste translate3d auf Null für Chrome setzen und einen WebKit-Maske-Bild für Safari hinzufügen:

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

Quelle

2015-05-29 07:11:18

Es funktioniert! Netter Hack. Wird es nur für Chrome und Safari benötigt? – BenNov

Sie haben die div innerhalb der Karte Element, um Stil, nicht die Karte Element.

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

Quelle

2015-06-22 15:36:16 Guest1

sollte dies mehr Upvotes haben. – phadaphunk

das hat perfekt funktioniert. – Wjdavis5

Ich musste sowohl dieses div als auch sein direktes Kind div gestalten –

-1

Dies wurde in einer anderen Antwort vorgeschlagen, aber es verpasst z-index:1 im CSS so auch in dem JSFiddle es nicht funktioniert hat.

HTML ist:

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

Und die CSS:

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

JSFiddle

Quelle

2016-08-10 19:11:00 waah

Es funktionierte für mich, als ich die z-index-Eigenschaft hinzugefügt:

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

Quelle

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

CSS3 abgerundete Ecke mit Google Karte

Antwort

Verwandte Themen