Question

出于光学原因，我想用简单重复的半透明png图像完全覆盖谷歌地图。我无法在官方文档中找到方法。地图应该保持功能。任何提示？

Answer 1

这里你去..最简单的方法是只想创建一个div叠加，如果你只是想覆盖一个重复的透明背景图像。只需将.overlay div的背景图像设置为背景图像：

HTML：

<div class="wrap">
    <div class="overlay"><h1>hey</h1></div>
    <div id="map-canvas"></div>
</div>

CSS：

html { height: 100% }
.wrap {
    width:100%;
    position:relative;
    width:300px;
    height:300px;
}
h1 {
    font-family:Arial;
}
.overlay {
    background:rgba(255,255,255,0.8);
    position:absolute;
    width:300px;
    z-index:1;
    height:300px;
    top:0; left:0;
}
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 300px; width:300px; }

或者如前所述，您可以使用overlayview路线，这稍微复杂一些，但可以让您更好地控制和集成Gmaps API事件和内容。 http://jsfiddle.net/78p6fb43/1/

bg图像的第二个例子：http://jsfiddle.net/78p6fb43/2/

但是，如果您仍然需要用户以某种方式与底层地图进行交互（例如点击标记，拖动地图等），上述解决方案将无效，您应该使用OverlayView方法

n.b。您发布的地图的截图我认为是MapBox而不是Google Maps API - MapBox基于Leaflet JS API。它非常易于使用，您可以更加自定义地图的设计（https://www.mapbox.com/design/）

如果您正在寻找Google地图的某些样式，请查看https://snazzymaps.com/explore

Google映射简单模式叠加

1 个答案: