2014-12-05 197 views
-1

我想完全覆蓋谷歌地圖與光學原因一個簡單的重複半透明PNG圖像。 我無法在官方文檔中找到方法。 地圖應該保持功能。 任何提示?谷歌地圖簡單圖案覆蓋

+0

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

+0

使用上面的@adaam建議的自定義疊加層,或者如果要疊加地圖圖塊。或者你想覆蓋地圖容器? – 2014-12-05 00:42:25

+0

我想覆蓋地圖塊,但我不希望它被綁定到任何座標。 (這是我想要存檔http://i61.tinypic.com/ir6fkl.png) – Niksac 2014-12-05 00:47:27

回答

0

這裏你去..最簡單的方法是創建一個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

+0

嗨,非常感謝您的鏈接和提示。我的截圖不是來自MapBox,但它看起來像一個很酷的工具。你有沒有一個簡單的png模式使用覆蓋視圖的例子。所有的例子似乎都與座標有關 – Niksac 2014-12-05 01:15:48