Javascript 谷歌地图：相对于固定定位
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6219709/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps: Relative to Fixed Positioning
提问by Emsu
The effect I'm looking for is that I have a div that is floating right with a Google map inside it and when the user scrolls down, I want it to be fixed at top:0px. This is basically what Yelp has for the map on their search page. There's been a few questions that are similar that ask about using JQuery to change the class of a div to fixed once the user scrollsdown but with Google Maps, I can't seem to get the effect to work.
我正在寻找的效果是，我有一个 div 浮动，里面有一个谷歌地图，当用户向下滚动时，我希望它固定在顶部：0px。这基本上就是 Yelp 在他们的搜索页面上为地图提供的内容。有一些类似的问题询问用户向下滚动后使用 JQuery 将 div 的类更改为固定，但使用 Google 地图，我似乎无法获得效果。
The main reason is that Google Maps is using some sort of javascript that is loading after my own javascript that override the position to absolute and I can't change it through Jquery's css method or anything. So I've added a wrapper that is floating but adds a fixed class upon scrolldown. It fixes to the top of 0px fine but because it was floating, once the position become's fixed it jumps to the left and clobbers my other content.
主要原因是谷歌地图使用了某种 javascript，它在我自己的 javascript 之后加载，将位置覆盖为绝对位置，我无法通过 Jquery 的 css 方法或任何方法更改它。所以我添加了一个浮动的包装器，但在向下滚动时添加了一个固定的类。它固定到 0px 的顶部很好，但因为它是浮动的，一旦位置固定，它就会跳到左边并破坏我的其他内容。
I found a tutorial online, but it might be deprecated now? It wasn't working.
我在网上找到了一个教程，但它现在可能已被弃用？它不起作用。
采纳答案by RwwL
You just needed to pick apart the specifics of what Yelp was doing a little more, I think... their column is floated as well (examine their markup... it's #searchLayoutMapResults), but then inside that, the div #searchLayoutMapResultsis the one that gets position: fixedadded to it (via the className fixed), so it doesn't change the position of the floated column. So you probably just want an additional wrapper on the map, and add the fixed positioning to that instead of your floated container.
你只需要挑出 Yelp 做的更多细节，我认为......他们的列也浮动（检查他们的标记......它是#searchLayoutMapResults），但是在里面，div#searchLayoutMapResults是那个position: fixed添加到它（通过 className fixed），所以它不会改变浮动列的位置。因此，您可能只需要在地图上添加一个额外的包装器，然后将固定定位添加到它而不是浮动容器中。
(the markup I found was based on this page)
（我发现的标记基于此页面）
回答by RASG
I had the same problem. All you have to do is create a DIV inside another. Like this:
我有同样的问题。您所要做的就是在另一个内部创建一个 DIV。像这样：
<div id="outDIV" style="position:fixed; top:0">
<div id="inDIV" style="width:100%; height:100%">
[map content goes here]
</div>
</div>
回答by borbulon
I know this is way old, but maybe someone else coming along can get some info out of this one.
我知道这已经很老了，但也许其他人可以从这个中获得一些信息。
Yes, you can add another element encasing the map element, but if you want to get around that you can set a listener for a tilesloadedevent and then undo what google's done.
是的，您可以添加另一个包含地图元素的元素，但是如果您想解决这个问题，您可以为tileloaded事件设置一个侦听器，然后撤消 google 所做的事情。
In api v3, you can do it like so:
在 api v3 中，您可以这样做：
google.maps.event.addListener(myMap, 'tilesloaded', function(){
document.getElementById('map-id').style.position = 'absolute'/'fixed'/'potato'/'whatever';
});
I'm sure there are issues that go with setting a position to a map beyond what google likes, but if you want to keep the number of elements in your document to a minimum (you should really want to), this would be the way to do it.
我敢肯定，将地图的位置设置为超出 google 喜欢的位置会存在一些问题，但是如果您想将文档中的元素数量保持在最低限度（您真的应该这样做），这将是方法去做吧。
(edit: adding quotes)
（编辑：添加引号）
