谷歌地圖簡單圖案覆蓋

-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

谷歌地圖簡單圖案覆蓋

回答

相關問題