谷歌地图:相对于固定定位

Question

我正在寻找的效果是我有一个正在浮动的div,里面有一个Google地图,当用户向下滚动时,我希望它固定在顶部:0px.这基本上是Yelp在搜索页面上对地图的影响.有一些类似的问题要求使用JQuery将div的类改为固定,一旦用户向下滚动,但使用谷歌地图,我似乎无法使效果起作用.

主要原因是谷歌地图正在使用某种类型的javascript加载我自己的javascript后覆盖绝对的位置,我不能通过Jquery的CSS方法或任何东西来改变它.所以我添加了一个浮动的包装器,但在scrollldown上添加了一个固定的类.它固定在0px的顶部,但由于它是浮动的,一旦位置变得固定,它会跳到左边并破坏我的其他内容.

我在网上找到了一个教程,但现在可能已经弃用了？它不起作用.

Answer 1

我有同样的问题.您所要做的就是在另一个内部创建一个DIV.像这样:

<div id="outDIV" style="position:fixed; top:0">
  <div id="inDIV" style="width:100%; height:100%">
    [map content goes here]
  </div>
</div>

Answer 2

我知道这已经过时了,但也许有其他人可以从这个获得一些信息.

是的,您可以添加另一个包含地图元素的元素,但是如果您想要解决这个问题,您可以为tilesloaded事件设置一个侦听器,然后撤消google所做的事情.

在api v3中,您可以这样做:

google.maps.event.addListener(myMap, 'tilesloaded', function(){
    document.getElementById('map-id').style.position = 'absolute'/'fixed'/'potato'/'whatever';
});

我确信在谷歌喜欢的地方设置地图的位置会有问题,但是如果你想将文档中的元素数量保持在最低限度(你真的应该这样),这就是方法去做吧.

(编辑:添加引号)