谷歌地图可以设置透明背景吗？

Question

谷歌地图可以有透明背景吗？我一直在尝试更改参数，但是找不到解决方案。我正在使用JS API。

谢谢。

- fancy

---

你尝试过设置地图所应用的容器的不透明度吗？如果我没记错的话，你会将一个元素作为地图容器传递，然后Google JS库会将地图渲染到该元素上。 - Tim M.

Answer 1

使用Google Maps API V3，可以给地图设置透明背景。 MapOptions对象有一个名为backgroundColor的属性，该属性设置地图的背景颜色。如果使用HSLA颜色值，您可以控制此背景颜色的不透明度以创建透明度。

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

除了设置颜色之外，您还需要使用一些地图样式来隐藏水（或任何您想要透明的东西）。

这里是一个演示效果的CodePen: http://codepen.io/verticalgrain/pen/LVRezx

- VerticalGrain

---

注意：截至2022年，这个笔“有点”可用。它可以使水变为透明，但是：实际上水覆盖了陆地以创建定义的陆地形态。如果像我一样，你想要只有陆地形态，并且水域区域显示在背后的网站上，那么你会得到一些非常奇怪的结果。 - Randy Hall

Answer 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>

- Tim M.

---

这难道不会使所有东西都变成50％半透明吗？我想让背景和元素像水一样100％透明。 - fancy

@fancy - 我不知道这个。我在网上找不到任何信息，而且我从未尝试过。这需要谷歌支持一个相当复杂的 alpha 通道渲染系统，并返回支持 32 位 alpha 通道的格式的地图（如 PNG）。 - Tim M.

好的，我可能会尝试使用静态地图，并使用画布来去除我不想要的部分。唯一的问题是我需要在我的服务器上缓存图像，而我认为这违反了Google的服务条款。:( - fancy