如何覆盖地图上的div [英] How to overlay a div on a map

问题描述

我目前正在进行一个我的迷你网络开发项目，我遇到了一个减速带。目前，我正在使用Google地图API为我的页面创建全屏地图背景。 （请参阅代码）我想在地图的顶部添加div，但每次创建div时，当我加载页面时，我都会看到它消失了一会儿？ （我只是在一个叠加的div后面有一个坚实的背景，高度为80％，宽度为100％）

 <风格类型= 文本/ CSS > 
 html {height：100％} 
 body {height：100％;保证金：0;填充：0;背景色：＃f6f6f6; } 
＃map-canvas {
 height：100％; 
宽度：100％; 
位置：绝对; 
 top：0; 
 bottom：0; 
剩下：0; 
 right：0; 
 margin：auto; 
} 
 
< / style> 
< script type =text / javascript
 src =https://maps.googleapis.com/maps/api/js?key=*********** &安培;传感器=假> 
< / script> 
< script type =text / javascript> 
函数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> 
  

解决方案

- 地图和div的索引...或者更好地尝试 jquery ui对话框插件

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>

解决方案

try manipulating your z-indexes of map and div...or better try jquery ui dialog plugin

这篇关于如何覆盖地图上的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！