2011-01-02 3 views
8

가능한 중복은 :
Transparent rounded corners on Google MapGoogle지도에 둥근 모서리를 넣는 트릭이 있습니까?

나는 특정 브라우저 평소 스타일 시트 속성을 사용하여 시도했지만, 아무도 제대로 작동하지 않습니다. 이 일을하게하는 트릭이 있습니까? 나는 야생에서 그것을 보았다는 것을 알고 있지만, 어디에서 기억할 수는 없다.

+0

문서가 준비되면 스타일을 추가하면 어쩌면 – Breezer

+0

예! 이 답변을보십시오 : http://stackoverflow.com/questions/16292026/css3-rounded-corner-with-google-map/30523342#30523342 – teradyl

답변

10

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

이제 왜 찾을 수 없었습니다. 감사! –

+0

오, 젠장, stackoverflow 질문에 대한 실제 솔루션을 넣어주세요! –

+0

@jb. 내 대답은 링크를 사용하여 답하는 메타 포스트와 거의 일치한다고 생각합니다. 나는 기본 전략을 제시하고 예제에 연결했다. http://meta.stackexchange.com/a/13370 – goric

관련 문제