2012-01-04 8 views
3

구글 맵스는 투명한 bg를 가질 수 있습니까? 저는 파라 머터들과 어리 석었지만 해결책을 찾지 못했습니다. JS API를 사용하고 있습니다.google지도는 투명도가 있나요?

감사합니다.

+0

당신이지도가 적용되는 컨테이너의 불투명도를 설정 시도? 위의 그림에서 알 수 있듯이 요소를지도 컨테이너로 전달하면 Google JS 라이브러리가지도를 렌더링합니다. –

답변

2

CSS가 1보다 작은 값인 opacity을 설정하면 가능합니다. 모든 최신 브라우저는 opacity을 독점 지정 문안으로 지원합니다.

<!-- The container to which the map is rendered by the Google JS library --> 
<div id="mapContainer" style="opacity:0.5"></div> 
+2

이것은 모든 것을 50 % 불투명하게 만듭니 까? 나는 bg와 물 같은 요소를 100 % 반투명하게 만들려고합니다. – fancy

+0

@fancy - 나는 그것에 대해 모른다. 나는 웹상에서 아무것도 찾을 수 없었고 나는 그것을 한 적이 없다. 따라서 Google은 상당히 정교한 알파 채널 렌더링 시스템을 지원하고 32 비트 알파 채널 (예 : PNG)을 지원하는 형식으로지도를 반환해야합니다. –

+0

맞습니다. 정적 인 맵을 사용하고 캔버스를 사용하여 원하지 않는 부분을 제거해 볼 수도 있습니다. 유일한 문제는 내 서버에 이미지를 캐싱해야한다는 것이며 Google TOS와 동일한 ID를 사용한다고 생각합니다. :( – fancy

6

Google지도 API V3에 투명 배경을 제공하는 방법이 있습니다. MapOptions 개체에는 backgroundColor이라는 속성이 있으며지도의 배경색을 설정합니다. HSLA 색상 값을 사용하는 경우이 배경색의 불투명도를 제어하여 투명도를 만들 수 있습니다.

var mapOptions = { 
zoom: 1, 
styles: mapStyles, 
backgroundColor: 'hsla(0, 0%, 0%, 0)', 
}; 

이 색상을 설정하는 것 외에도 물을 숨기려면지도 스타일을 사용해야합니다. 여기

는 codepen는 효과를 시연 : http://codepen.io/verticalgrain/pen/LVRezx

관련 문제