谷歌地图：相对于固定定位答案

【问题标题】：Google Maps: Relative to Fixed Positioning谷歌地图：相对于固定定位
【发布时间】：2012-01-25 01:05:09
【问题描述】：

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

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

我在网上找到了一个教程，但现在可能已弃用？它没有工作。

【问题讨论】：

很难在没有看到您的代码的情况下提供帮助。您是否尝试过使用 CSS !important 声明？
此时谷歌地图失败了。有意义的是：我在我的 GUI 上为 GMaps 提供了一个矩形以将景观绘制到其中，但这个矩形的位置和方式与 GMaps 无关。它的行为很奇怪。 position:absolute 运行良好，position:fixed 失败。我会称之为错误。然而 5 年后，它仍然没有修复......

标签： javascript jquery google-maps position

【解决方案1】：

我遇到了同样的问题。您所要做的就是在另一个内部创建一个 DIV。像这样：

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

【讨论】：

【解决方案2】：

我知道这已经很老了，但也许其他人可以从中获得一些信息。

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

在 api v3 中，你可以这样做：

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

我确信在地图上设置位置超出了谷歌的喜好，但如果你想将文档中的元素数量保持在最低限度（你真的应该这样做），这将做它的方法。

（编辑：添加引号）

【讨论】：

我这边也不再工作了，你也一样吗？

【解决方案3】：

我认为，您只需要进一步了解 Yelp 所做的事情的细节......他们的专栏也是浮动的（检查他们的标记......它是#searchLayoutMapResults），但在里面， div #searchLayoutMapResults 是将position: fixed 添加到其中的那个（通过类名fixed），因此它不会改变浮动列的位置。因此，您可能只需要在地图上添加一个额外的包装器，并将固定定位添加到其中，而不是您的浮动容器。

（我发现的标记是基于this page）

【讨论】：

#mapcontainer 也会在用户向下滚动到足以使#searchLayoutMapResults 的可见高度低于#mapcontainer 高度时将类更改为“底部”。