如何在地圖上疊加div

Question

我目前正在接受我的迷你網絡開發項目，我遇到了一個減速帶。 目前我正在使用Google maps API為我的網頁創建全屏地圖背景。 （參考代碼）我試圖在地圖的頂部添加一個div，但每次我創建一個div，當我加載頁面時，我看到它消失了一會兒？ （我剛剛在一個疊加的div后面，背景為實心，高度為80％，寬度為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會這樣做，但你可以利用為此設計的內置功能，而不是重新發明輪子。 看看地圖控件 。

為了達到你想要的目標（“ 我只是在一個具有堅實背景和高度為80％，寬度為100％的重疊div之后 ”）：

css：

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

加價：

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

將疊加層添加到地圖中

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

看小提琴 - > http://jsfiddle.net/M6a7q/