可能性の重複:
Transparent rounded corners on Google MapGoogleマップに丸みのあるコーナーを置くという方法はありますか?
私は特定のブラウザのためにいつものスタイルシートのプロパティを使用して試してみたが、どれも動作するようには思えません。これを実現させるためのトリックはありますか?私は野生でそれを見たことが分かっていますが、どこを思い出すことはできません。
可能性の重複:
Transparent rounded corners on Google MapGoogleマップに丸みのあるコーナーを置くという方法はありますか?
私は特定のブラウザのためにいつものスタイルシートのプロパティを使用して試してみたが、どれも動作するようには思えません。これを実現させるためのトリックはありますか?私は野生でそれを見たことが分かっていますが、どこを思い出すことはできません。
このトピックについて議論しているthis threadには、this pageへのリンクがあり、これはあなたが探しているものの例です。
戦略は、丸みのあるコーナー画像で地図をオーバーレイするように見えます。
編集:サンプルコードです。
<!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>
なぜ私はそれを見つけることができませんでした。ありがとう! –
ああ、神のためにstackoverflowの質問のための実際のソリューションを入れてください! –
@ jb。私は、私の答えは、リンクを使って答えるメタポストとほぼ同じだと思う。私は基本的な戦略を与え、例にリンクしました。 http://meta.stackexchange.com/a/13370 – goric
文書が準備完了したらスタイルを追加してもよろしいですか – Breezer
はい!この回答をお試しください:http://stackoverflow.com/questions/16292026/css3-rounded-corner-with-google-map/30523342#30523342 – teradyl