2012-01-04 28 views
3

googleマップは透過的なbgを持つことができますか?私はパラメーターを悩ましていますが、解決策を見つけることはできません。私はJS APIを使用しています。Googleマップは透過的なbgを持つことができますか?

ありがとうございました。

+0

あなたはマップが適用されたコンテナの上に不透明度を設定したことがありますか?私が思い出したように、要素をマップコンテナとして渡すと、Google JSライブラリがマップをレンダリングします。 –

答えて

2

これは、CSSを使用してopacityの値を1未満に設定することで可能と思われます。現代のブラウザーはすべて、ネイティブまたは専有の指示文で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

@ファンシー - 私はそれについて知らない。私はウェブ上で何かを見つけることができず、私はそれをやったことがない。そうすれば、Googleはかなり洗練されたアルファチャンネルレンダリングシステムをサポートし、32ビットアルファチャンネル(PNGなど)をサポートする形式で地図を返す必要があります。 –

+0

そうですね、静的なマップを使用し、キャンバスを使って私が望まない部分を削除しようとするかもしれません。私のサーバーにイメージをキャッシュする必要があるだけの問題があり、私はそれがGoogle TOSであると考えています。 :( – 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

関連する問題