谷歌地图简单的模式叠加

Google maps simple pattern overlay

本文关键字：叠加 模式 简单 谷歌地图      更新时间：2023-09-26

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

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

.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; }

或者，正如我之前提到的，你可以使用覆盖视图路线，它稍微复杂一些，但可以让你更好地控制和与Gmaps API事件和东西的集成。http://jsfiddle.net/78p6fb43/1/

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

但是，如果您仍然需要您的用户以某种方式与底层地图进行交互(即单击标记、拖动地图等(，上述解决方案将不起作用，您应该使用 OverlayView 方法

注

：注：我相信您发布的地图截图是MapBox而不是Google Maps API - MapBox基于Leaflet JS API。它非常易于使用，您可以自定义地图的设计更多(https://www.mapbox.com/design/(

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

相关文章：