谷歌地图简单图案叠加

Question

I want to completely overlay a google map with a simple repeating semitransparent png image for optical reasons. I cant find a way in the official documentation. The map should remain functional. Any hints ?

Answer 1

Here you go.. Simplest way is to just create a div overlay if you simply want to overlay a repeating transparent-ish background image. Just set the background image of the .overlay div to the background image:

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

Alternatively as I have mentioned before, you can go the overlayview route, which is slightly more complicated but gives you more control and integration with Gmaps API events and stuff. http://jsfiddle.net/78p6fb43/1/

Second example with bg image: http://jsfiddle.net/78p6fb43/2/

However, if you still need your user to interact with the underlying map in some way (ie click markers, drag the map etc), the above solution will not work and you should use the OverlayView approach

nb The screenshot of the map you have posted I believe is MapBox not the Google Maps API - MapBox is based on the Leaflet JS API. It is very easy to use and you can customize the design of the map far more ( https://www.mapbox.com/design/ )

If you're looking for some styles for Google Maps, check out https://snazzymaps.com/explore