出于光学原因,我想用简单重复的半透明png图像完全覆盖谷歌地图。 我无法在官方文档中找到方法。 地图应该保持功能。 任何提示?
答案 0 :(得分:0)
这里你去..最简单的方法是只想创建一个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