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

Question

我正在寻找的效果是，我有一个浮动的div，里面有一个Google地图，当用户向下滚动时，我希望它固定在顶部:0px。这基本上就是Yelp在他们的搜索页面上的地图。有一些类似的问题，是关于在用户向下滚动时使用JQuery将div的类更改为fixed，但使用Google Maps时，我似乎无法获得效果。

主要原因是Google Maps使用了某种javascript，它是在我自己的javascript之后加载的，它将位置覆盖为绝对位置，并且我不能通过Jquery的css方法或其他任何东西来更改它。所以我添加了一个浮动的包装器，但在向下滚动时添加了一个固定的类。它固定在0px的顶部很好，但是因为它是浮动的，一旦位置变得固定，它就会跳到左边，并撞到我的其他内容。

我在网上找到了一个教程，但它现在可能被弃用了？这不管用。

Answer 1

我认为，你只需要仔细分析一下Yelp正在做什么的细节就行了。它们的列也是浮动的(检查它们的标记...它是#searchLayoutMapResults)，但是在其中，div #searchLayoutMapResults是将position: fixed添加到其中的那个(通过className fixed)，所以它不会改变被浮动列的位置。因此，您可能只需要在地图上添加一个额外的包装器，并在其中添加固定的位置，而不是浮动的容器。

(我找到的标记是基于this page的)

Answer 2

我也有同样的问题。您所要做的就是在另一个DIV中创建一个DIV。如下所示：

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

Answer 3

我知道这很古老，但也许其他人可以从这篇文章中获得一些信息。

是的，你可以添加另一个包含map元素的元素，但是如果你想绕过这一步，你可以为一个磁贴加载的事件设置一个侦听器，然后撤销google所做的事情。

在v3接口中，您可以这样做：

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

我敢肯定，设置地图的位置会出现一些超出谷歌喜欢的问题，但如果你想要将文档中的元素数量保持在最低限度(你真的应该这样做)，这将是一种方法。

(编辑:添加引号)