試圖複製谷歌地圖滑動面板與地圖v3和jquery

我試圖創建一個類似於當前使用的滑動面板在maps.google.com的左側我試圖複製的行爲與該面板（如顯示在谷歌地圖）結合試圖複製谷歌地圖滑動面板與地圖v3和jquery

當面板打開地圖中心將保持靜止
地圖控制（縮放，縮放等）不被面板重疊，如在它們隨着專家組的擴大將會轉移。

我最初認爲我可以在地圖上絕對放置一個div，但這是覆蓋地圖控件例如（縮放，縮放等）並將它們放置在別處不是一種選擇。

我的其他兩次嘗試幾乎都是在那裏，但不幸的是不完全。請注意，代碼示例很快就會出現在演示中。

第一嘗試：

兩個div，一個是滑動面板和另一保持地圖內容，無論向左浮動。白色面板上的「關閉」/「打開」按鈕具有一個點擊處理程序，用於動畫滑動面板邊距的更改以隱藏它。地圖div的寬度平行展開以填充空白空間。這裏的問題是當擴展面板時，整個地圖向右移動（在jsfiddle示例中單擊「打開」/「關閉」）將面板放置在屏幕的右側解決了這個問題（增加了溢出：隱藏在html元素上）雖然這不符合我的設計要求。

還要注意的是使用谷歌地圖panby（X，Y）的功能來修復像素跳躍很笨重，所以不是一個真正的選擇要麼

第2次嘗試：

http://jsfiddle.net/63uxt/1/

所以我想通過編程添加一個自定義的Google地圖控件（控件是滑動面板），並使用定位選項讓其他控件很好地適合我的滑動面板。最初認爲它的工作，直到我意識到其他控件不會在隱藏滑動面板後重新定位自己。移動地圖更新了原生控件的位置（縮放等），但這不可行。

任何想法?? 謝謝

來源

2011-09-20 Stephen Jones

我不太明白你真正想要什麼。您是否希望將地圖縮放/平移控件作爲滑動面板的一部分，還是要移動它們以使滑動面板不覆蓋它們？ – Tomm

嗨，Tomm，確切地說，我希望他們轉移，因此面板不會覆蓋它們。這是當前谷歌地圖網站的行爲。當點擊谷歌地圖上的滑動面板展開按鈕時，地圖的位置保持不動，控件（縮放，比例等）向右移動 –

（抱歉，我想我可能最初在嘗試2時公佈了錯誤的jsfiddle，被推薦）無論如何，與面板在右邊的例子，雖然這不符合我的設計要求。 http://jsfiddle.net/w6HFa/6/ –

好吧我想我有這個想通了。

一個非常簡單的例子 - http://jsfiddle.net/H87q7/3/

我已經走了的自定義地圖的控制途徑和所用jQuery的動畫功能來觸發谷歌地圖「調整」事件「步」回調。這會在動畫的每個步驟重新定位地圖上的控件，這些動畫看起來非常平滑。

不知道它有多優雅，因爲我寧願不使用自定義的谷歌控制，因爲我有相當數量的html元素在面板中連接並以編程方式添加它們並不是我想要的要做，但無論如何...

我很樂意聽取關於替代方法的意見。謝謝

來源

2011-09-21 12:31:21

感謝這個斯蒂芬它已經幫了很多。但是，一旦我實現了滑動面板，我的所有信息窗口都會重新調整爲默認值。之前，信息窗口的高度約爲500px，現在只有約200px。有任何想法嗎？ –

試圖複製谷歌地圖滑動面板與地圖v3和jquery

回答

相關問題