谷歌地圖：相對於固定位置

我在尋找的效果是，我有一個div，它內置Google地圖，當用戶向下滾動時，我希望它固定在頂部：0px 。這基本上是Yelp在他們的搜索頁面上對地圖的作用。有幾個類似的問題需要關於如何使用JQuery將div的類更改爲固定，一旦用戶滾動，但使用Google Maps，我似乎無法使效果起作用。谷歌地圖：相對於固定位置

主要原因是Google地圖正在使用某種JavaScript加載後我自己的JavaScript覆蓋絕對的位置，我不能通過JQuery的css方法或任何東西改變它。所以我添加了一個浮動的包裝器，但在scrolldown上添加了一個固定的類。它固定在0px的頂部，但因爲它是浮動的，所以一旦位置變得固定，它會跳到左邊並且破壞我的其他內容。

我在網上找到了一個教程，但現在可能會被棄用？它沒有工作。

來源

2011-06-02 Emsu

很難不看你的代碼。你嘗試過使用CSS！重要聲明嗎？ – squidbe 2011-06-02 20:11:01

此時Google地圖失敗。有意義的是：我在我的GUI上爲GMaps提供了一個矩形來繪製風景，但是這個矩形所處的位置和方式並不是GMaps業務。它表現得很奇怪。 'position：absolute'正常工作，'position：fixed'失敗。我會稱這是一個錯誤。然而，5年後，它仍然沒有修復...... – Bitterblue 2016-06-14 14:15:33

你只需要分開Yelp多做些什麼的細節，我想......他們的專欄也是漂浮的（檢查他們的標記......它是#searchLayoutMapResults），但在那裏面，div #searchLayoutMapResults是獲得position: fixed（通過className fixed）添加到它的那個，所以它不會更改浮動列的位置。因此，您可能只需要在地圖上添加一個包裝，並將固定位置添加到該位置，而不是浮動容器。

（我找到的標記是基於this page）

來源

2011-06-02 20:15:21 RwwL

#mapcontainer也會將類更改爲「底部」，一旦用戶向下滾動足夠遠以使#searchLayoutMapResults的可見高度低於#mapcontainer高度。 – 2011-06-02 20:26:16

我有同樣的問題。你所要做的就是在另一個內部創建一個DIV。像這樣：

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

來源

2011-10-25 11:07:05 RASG

作品魅力 – anton 2016-04-03 17:44:07

我知道這是舊的方式，但也許有人沿着別人來可以得到一些信息了這一個。

是的，你可以添加其他元素包裹的地圖元素，但如果你想避開，你可以設置一個監聽器tilesloaded事件，然後撤消是谷歌完成了。

在API V3，你可以做到這一點，像這樣：

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

我敢肯定有與設置超出了谷歌喜歡的地圖的位置去的問題，但如果你想保持文檔中的元素數量最少（你應該真的很想），這將是實現它的方法。

（編輯：加引號）

來源

2012-01-24 17:05:09 borbulon

無論是在我身邊還是不工作，對你也一樣？ – 2015-06-04 13:45:11

谷歌地圖：相對於固定位置

回答

相關問題