Mögliche Duplizieren:
Transparent rounded corners on Google MapGibt es einen Trick, um eine Google Map mit abgerundeten Ecken zu versehen?
Ich habe versucht, die üblichen Stylesheet-Eigenschaften für bestimmte Browser verwenden, aber keiner scheint zu funktionieren. Gibt es einen Trick, um das zu erreichen? Ich weiß, ich habe es in der Wildnis gesehen, kann mich aber nicht erinnern, wo.
In this thread diskutieren dieses Thema, gibt es einen Link zu this page, die ein Beispiel genau das, was Sie suchen.
Die Strategie scheint zu sein, die Karte mit abgerundeten Eckenbildern zu überlagern.
EDIT: Hier ist der Beispielcode.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rounded Map Corners - Google Maps Javascript API v3</title>
<style>
html, body {height: 100%; margin: 0;}
#Container {position:relative;width:400px;margin:20px;}
.TopLeft, .TopRight, .BottomLeft, .BottomRight {position:absolute;z-index:1000;background-image: url(corners.png);width:20px;height:20px;}
.TopLeft {left: 0; top: 0;}
.TopRight {right: 0; top: 0; background-position: top right;}
.BottomRight {right: 0; bottom: 0; background-position: bottom right;}
.BottomLeft {left: 0; bottom: 0; background-position: bottom left;}
#map_canvas {width: 400px; height: 400px;}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function Initialize() {
var MapOptions = {
zoom: 15,
center: new google.maps.LatLng(37.20084, -93.28121),
mapTypeId: google.maps.MapTypeId.ROADMAP,
sensor: false
};
map = new google.maps.Map(document.getElementById("map_canvas"), MapOptions);
}
</script>
</head>
<body onload="Initialize()">
<div id="Container">
<div class="TopLeft"></div>
<div class="TopRight"></div>
<div id="map_canvas"></div>
<div class="BottomLeft"></div>
<div class="BottomRight"></div>
</div>
</body></html>
Nun, warum konnte ich das nicht finden. Vielen Dank! –
Oh, bitte, stell bitte aktuelle Lösungen für stackoverflow Fragen! –
@jb. Ich denke meine Antwort ist mehr oder weniger im Einklang mit dem Metapost bei der Beantwortung von Links. Ich gab die grundlegende Strategie und verlinkte mit einem Beispiel. http://meta.stackexchange.com/a/13370 – goric
vielleicht, wenn Sie den Stil hinzufügen, sobald das Dokument fertig ist, könnte das funktionieren – Breezer
Ja! Versuchen Sie diese Antwort: http://stackoverflow.com/questions/16292026/css3-rounded-corner-with-google-map/30523342#30523342 – teradyl