Powiel możliwe:
Transparent rounded corners on Google MapCzy jest jakaś sztuczka, aby umieścić zaokrąglone rogi na mapie Google?
Próbowałem stosując zwykłe właściwości arkusza stylów dla konkretnych przeglądarek, ale nie wydają się działać. Czy jest jakaś sztuczka, aby tak się stało? Wiem, że widziałem to na wolności, ale nie pamiętam, gdzie.
W temacie znajduje się link do this page, który zawiera przykład dokładnie tego, czego szukasz.
Strategia wydaje się być nałożona na mapę zaokrąglonymi narożnymi obrazami.
EDYCJA: Oto przykładowy kod.
<!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>
Dlaczego nie mogłem tego znaleźć. Dzięki! –
Och, na litość boską, proszę podać aktualne odpowiedzi na pytania dotyczące stackoverflow! –
@jb. Myślę, że moja odpowiedź jest mniej więcej zgodna z meta postem w odpowiedzi na linki. Podałem podstawową strategię i powiązałem ją z przykładem. http://meta.stackexchange.com/a/13370 – goric
Może po dodaniu stylu po przygotowaniu dokumentu może zadziałać – Breezer
Tak! Wypróbuj tę odpowiedź: http://stackoverflow.com/questions/16292026/css3-rounded-corner-with-google-map/30523342#30523342 – teradyl