div overlay禁用谷歌地图功能

时间:2014-03-24 09:58:12

标签: javascript jquery html css google-maps

我正在创建一个网站,我想在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 (单击搜索按钮以获得更好的视图)

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

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

2 个答案:

答案 0 :(得分:1)

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

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

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

答案 1 :(得分:0)

在CSS或内联样式中,id =&#34; mapContainer&#34;,删除位置:绝对属性并检查输出。

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