通過移動左邊緣來調整谷歌地圖的尺寸

我想在用戶單擊按鈕時放大（縮小）地圖。地圖將調整其左邊緣，將其向左移動以變大，同時將右邊緣保持在相同的位置。這基本上就是谷歌地圖本身的功能，當你點擊小部件來放大地圖時（覆蓋左邊欄）。通過移動左邊緣來調整谷歌地圖的尺寸

我沒有問題調整/重新定位包含地圖的div，然後調用 google.maps.event.trigger（map，'resize'）; 唯一的問題是，如預期的那樣，地圖的內容在屏幕上移動。我不想那麼做，我想把地圖留在相同的位置，就像谷歌地圖一樣。換句話說，我希望右邊的lat-long位置保持不變，因爲地圖的右邊緣不會改變。

調用map.getCenter（）然後map.setCenter（）不會做我想要的，當然是（雖然它比沒有做什麼好）。 map.panBy（）可能會起作用，因爲它的參數是以像素爲單位的（vs lat/long），但是它會對它進行動畫處理，這不是我想要的。

任何想法？我是否必須進行lat/long轉換爲像素，還是有更簡單的方法來做到這一點？

來源

2011-06-22 rob

訣竅不是調整地圖大小，而是在您創建的地圖上放置遮罩（地圖以最大尺寸創建）並移動遮罩（div）。地圖始終保持相同的大小。您可能需要調整地圖上其他控件的位置，例如縮放等（可以使用標準地圖apis來完成）或者只需在右側顯示控件。

有一件事要記住，該地圖將有一個邊界框等於全尺寸地圖，所以如果你添加標記到地圖（你希望用戶看到它們），你需要跟蹤邊界框地圖當前可見的部分（latLng到像素轉換） - 這樣，如果向掩碼覆蓋的部分添加標記，則可以滾動地圖。

這是一個使用jquery動畫完成的示例（但只需將側邊欄的可見性關閉即可實現）。。需要注意的另一個重要的事情是用於包裝和側欄和地圖容器中的CSS .... 享受：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Resize map</title> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
     <script type="text/javascript"> 
      var map; 
      var overlay; 
      var sidebar_expanded = true; 
      function initialize() { 
       var myLatlng = new google.maps.LatLng(-25.363882,131.044922); 
       var myOptions = { 
        zoom: 4, 
        center: myLatlng, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       } 
       map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

      } 

      $(document).ready(function() { 
       $("#hide").click(function(e) { 
        if (sidebar_expanded){ 
         offset = "-=140"; 
         text = "Show me" 
        } else { 
         offset = "+=140"; 
         text = "Hide me" 
        } 
        $("#sidebar").animate({ 

         left: offset, 

        }, 1000, function() { 

          // Animation complete. 
         //you probably want to change content of the hide me div to show me, etc) 
         $("#hide").text(text); 
         sidebar_expanded = (sidebar_expanded) ? false : true; 
        }); 
       }) 
      }) 
     </script> 
     <style> 
      body { 
       text-align: center; 
      } 
      #map_canvas { 
       position: absolute; 
       top: 0; 
       left: 0; 
      } 
      #wrapper { 
       position: relative; 
       width: 900px; 
       height: 500px; 
       overflow: hidden; 
      } 
      #sidebar { 
       position: absolute; 
       top: 0; 
       left: 0; 
       width: 200px; 
       height: 500px; 
       background: white; 
       z-index: 2000000; 
       border: 1px solid black; 
      } 

     </style> 
    </head> 
    <body onload="initialize()"> 
     <div id="wrapper"> 
      <div id="sidebar"> 
       <div id="hide" style="text-align:right;padding: 6px;"> 
        Hide me 
       </div> 
      </div> 
      <div id="map_canvas" style="width:900px;height: 500px;"> 
      </div> 
     </div> 
    </body> 
</html>

來源

2011-06-23 01:10:51 Michal

我曾經考慮過這種做法，但很關心這樣的事情，確保谷歌標誌不會被掩蓋了，這是對的條款服務。還有其他的地方可能會讓事情變得糟糕，例如，如果我允許谷歌在地圖上繪製方向，它會自動設置窗口，並且如果窗口的一部分被隱藏，將會不正確地做到這一點。最後，我不確定如何處理像素轉換。 – rob

我想這是你想要的。

我用米哈爾的例子，並添加了東西。

地圖谷歌徽標和條款&使用總是顯示。查看留在最後的位置，即使在側邊欄的變化

http://jsfiddle.net/guy_regev/K39dE/3/

來源

2012-06-04 15:45:56

這不是OP想要的。地圖切片，標記等在側欄展開時向右移動。只有地圖控件和Google徽標應該移動。如何做到這一點？ – sompylasar

通過移動左邊緣來調整谷歌地圖的尺寸​​

回答

相關問題

通過移動左邊緣來調整谷歌地圖的尺寸