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 dialog插件

Answer 3

z-index会这样做，但你可以利用为此设计的内置功能，而不是重新发明轮子。看看Map Controls。

要达到你想要的效果（“我只是在一个背景为实心，高度为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')
);

看小提琴 - ＆gt;的 http://jsfiddle.net/M6a7q/

如何在地图上叠加div

3 个答案: