如何在 Web 應用程式中動態調整 Google 地圖的大小？

動態調整Google 地圖大小

在Web 應用程式中，您可能會遇到需要在載入Google 地圖後調整其大小的情況。調整地圖容器 div 的大小通常是不夠的，因為它可能會導致邊緣附近扭曲的圖塊消失。

Google 地圖v3 的解決方案

正確調整Google 地圖的大小在版本3 中，您需要明確觸發「resize」事件：

google.maps.event.trigger(map, "resize");

此方法可確保Google 地圖調整其內部計算並更新地圖顯示以符合容器div 的新尺寸。

使用jQuery 的範例

以下JavaScript 程式碼示範如何使用「調整大小」事件觸發器來調整Google 地圖的大小：

$(function() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  var map = new google.maps.Map($("#map-canvas")[0], mapOptions);

  // Listen for window resize events and trigger map resizing
  $(window).resize(function() {
    google.maps.event.trigger(map, "resize");
  });
});

在此例如，建立地圖並使用jQuery 事件處理來處理其大小調整行為。當視窗大小改變時，地圖上會觸發「resize」事件，強制其調整顯示。

透過觸發「resize」事件，可以確保 Google 地圖適應新的大小容器 div 並提供無縫的使用者體驗，無論視窗或容器尺寸如何變化。

以上是如何在 Web 應用程式中動態調整 Google 地圖的大小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！