谷歌地图简单图案覆盖

-1

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

来源

2014-12-05 Niksac

https://developers.google。 com/maps/documentation/javascript/examples/overlay-simple – adaam 2014-12-05 00:39:24

使用上面的@adaam建议的自定义叠加层，或者如果要叠加地图图块。或者你想覆盖地图容器？ – 2014-12-05 00:42:25

我想覆盖地图块，但我不希望它被绑定到任何坐标。（这是我想要存档http://i61.tinypic.com/ir6fkl.png） – Niksac 2014-12-05 00:47:27

这里你去..最简单的方法是创建一个div覆盖，如果你只是想覆盖一个重复的透明ish背景图像。就在.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方法

nb您发布的地图屏幕截图我相信是MapBox而不是Google Maps API - MapBox基于Leaflet JS API。这是非常容易使用，你可以自定义地图的设计更（https://www.mapbox.com/design/）

如果你正在寻找一些样式谷歌地图，看看https://snazzymaps.com/explore

来源

2014-12-05 00:51:11 adaam

嗨，非常感谢您的链接和提示。我的截图不是来自MapBox，但它看起来像一个很酷的工具。你有没有一个简单的png模式使用覆盖视图的例子。所有的例子似乎都与坐标有关 – Niksac 2014-12-05 01:15:48

谷歌地图简单图案覆盖

回答

相关问题