Question

我正在开发一个带有谷歌地图的网页，在开发期间谷歌地图控件突然停止工作。我怀疑这可能是由错误的CSS或JS引起的。我在下面列出了相关代码。请告诉我如何让地图再次激活，以便用户可以拖动地图并单击标记/地图。

我的HTML：

<div id="wrapper">
<div class="map-position">
    <div id="map_canvas"></div>
    </div>
    <div id="" class="overlap ">

    <text style="vertical-align:top;text-align:center; font-weight:bold">Load Itineraries Test</text>
    <hr>
    <div id="floating-panel">
        <span>Select an Itenarary From the List Below: </span>
        <ul id="itin_list" class="list-group">
    </div>
</ul>
</div>
</div>

CSS：

html { 
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#map_canvas {
    height: 100%; 
    width: 100%;
    margin: auto;
    float: bottom;
    padding: 20px;
    position: absolute
}
.overlap {
    position: relative; 
    height: 80%; 
    width: 30%;
    margin: auto;
    float: right;
    border: 2px solid #3399FF; 
    background: white;
    top: 55px;
    right: 5px
}
.map-position {
    width: 100%;
    height: 100%;
    position: fixed;
    display: block;
    z-index: -1;
}



#directions-panel {
        margin-top: 5px;
        background-color: #FFEE77;
        padding: 10px;
        overflow-y: scroll;
        height:200px;
        z-index: 9900;
}

Javascript（仅限地图）

var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 7,
    center: new google.maps.LatLng(7.450907, 80.808975),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setMap(map);

Answer 1

从position: fixed类

中删除.map-position

proof of concept fiddle

代码段

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 7,
    center: new google.maps.LatLng(7.450907, 80.808975),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  // directionsDisplay.setMap(map);


}
google.maps.event.addDomListener(window, "load", initialize);

html {
  height: 100%
}
body {
  height: 100%;
  margin: 0;
  padding: 0
}
#map_canvas {
  height: 100%;
  width: 100%;
  margin: auto;
  float: bottom;
  padding: 20px;
  position: absolute
}
.overlap {
  position: relative;
  height: 80%;
  width: 30%;
  margin: auto;
  float: right;
  border: 2px solid #3399FF;
  background: white;
  top: 55px;
  right: 5px
}
.map-position {
  width: 100%;
  height: 100%;
  /* position: fixed;*/
  display: block;
  z-index: -1;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="wrapper">
  <div class="map-position">
    <div id="map_canvas"></div>
  </div>
  <div id="" class="overlap ">
    <text style="vertical-align:top;text-align:center; font-weight:bold">Load Itineraries Test</text>
    <hr>
    <div id="floating-panel">
      <span>Select an Itenarary From the List Below: </span>

      <ul id="itin_list" class="list-group" />
    </div>
  </div>
</div>

禁用Google地图和控件，无法点击地图上的标记/任何内容

1 个答案: