div overlay禁用谷歌地图功能

Question

我正在创建一个网站，我想在googleMaps上显示搜索结果。 我希望当光标位于搜索结果上方或光标位于地图上时，可以滚动浏览这些搜索结果。我通过制作这样的div结构来实现这一点：

<div class="map" id="parent"  >
  <div id="googleMap"></div>
  <div id="mapContainer">
    <div id="searchContainer">
      <!-- searchresults -->
    </div>
  </div>
</div>

我在googleMaps中禁用了滚动功能。我仍然想拖动地图，但这是不可能的，因为div放在它上面。我该怎么解决这个问题？

我的工作在此处可见：http://www.veylau.be/testzone/wcb/searchtwee.html （单击搜索按钮以获得更好的视图）

还有一些定位问题，不介意它们，在这个问题之后它们会被解决。

先谢谢你帮助我！我真的很感激！

Answer 1

要允许与地图进行交互，您需要发现搜索部分当前正在覆盖的部分地图。

如果在#mapContainer上将padding-top更改为margin-top，您将看到在搜索元素上方，现在可以访问该地图。您还需要缩小搜索区域的宽度以允许侧面访问。从本质上讲，你会想要使用类似于保证金的东西：0 auto;将块放在中心位置，使得两侧不会被＆＃34;隐形＆＃34;覆盖。如果定义了填充或宽度以实现类似的外观，则搜索块块的一部分就是这种情况。

如果您希望防止地图放大和缩小，即使用户不在搜索块上，您也需要使用javascript来确保.map元素中的所有鼠标滚动都将定位搜索块并不使用它的默认功能，可以是放大/缩小地图，也可以根据光标的位置滚动块。

Answer 2

在CSS或内联样式中，id =＆＃34; mapContainer＆＃34;，删除位置：绝对属性并检查输出。

我希望它能解决您的问题。