如何在地图上叠加div

Question

I am currently undergoing a mini web development project of mine and I have ran into a speed bump. At the moment I am using the Google maps API to create a full screen map background to my page. (Refer to code) I am trying to add a div on the top of the map but every time I create a div, when i load the page, i see it for a moment the it disappears? (Im just after an overlaid div with a solid background and a height of 80% and width of 100%)

  <style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0; background-color:#f6f6f6; }
 #map-canvas { 
  height: 100%;
  width:100%;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
      }

</style>
<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=***********&sensor=false">
</script>
<script type="text/javascript">
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(-37.8136, 144.9631),
      zoom: 16,
      mapTypeControl: false,
  draggable: false,
  scaleControl: false,
  scrollwheel: false,
      disableDefaultUI: true
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

您是否尝试将div的z-index属性调整为非常高的值？

Answer 2

尝试操作map和div的z-index ...或者更好的尝试jquery ui对话框插件

Answer 3

z-index would do it, but you could take advantage of the builtin functionality designed for exactly this, instead of reinventing the wheel. Take a look at Map Controls .

To achieve what you want (" Im just after an overlaid div with a solid background and a height of 80% and width of 100% ") :

css :

  #overlay {
      background-color: white;
      height: 80%;
      width: 100%;   
    }

markup :

<div id="overlay"><h2>I am an overlay-div</h2></div>

add the overlay to the map

map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(
   document.getElementById('overlay')
);

see fiddle -> http://jsfiddle.net/M6a7q/