谷歌地图响应式调整大小答案

【问题标题】：Google maps responsive resize谷歌地图响应式调整大小
【发布时间】：2013-08-28 22:40:29
【问题描述】：

我正在尝试让谷歌地图响应并调整大小，同时在窗口调整大小时保持其中心。我阅读了其他堆栈问题，例如：

Responsive Google Map? 和 Center Google Maps (V3) on browser resize (responsive)

来自第二个堆栈问题I got a link which helps me with part of the code，但我仍然没有运气。这是我正在使用的代码，当我调整窗口大小时，地图根本不会调整大小

    function initialize() {
      var mapOptions = {
       center: new google.maps.LatLng(40.5472,12.282715),
       zoom: 6,
       mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map-canvas"),
                mapOptions);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    google.maps.event.addDomListener(window, "resize", function() {
     var center = map.getCenter();
     google.maps.event.trigger(map, "resize");
     map.setCenter(center); 
    });

html

 <div id="map-canvas"/>

css

html { height: 100% }
body { height: 100%; margin: 0; padding: 0; }
#map-canvas { height: 100%; }

【问题讨论】：

你的问题回答了我的问题！谢谢！
@GuillermoGutiérrez 是哪一个？
@nilon 我没有发布它，但它是关于如何使用 Javascript API 在谷歌地图中设置地图的中心。

标签： javascript jquery google-maps-api-3

【解决方案1】：

将您的地图变量移动到事件侦听器可以使用它的范围内。您正在您的 initialize() 函数中创建地图，以这种方式创建时没有其他东西可以使用它。

var map; //<-- This is now available to both event listeners and the initialize() function
function initialize() {
  var mapOptions = {
   center: new google.maps.LatLng(40.5472,12.282715),
   zoom: 6,
   mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
 var center = map.getCenter();
 google.maps.event.trigger(map, "resize");
 map.setCenter(center); 
});

【讨论】：

太棒了，这简直完美，有没有办法在我们调整窗口大小时也添加对缩放的更改？
可以，可以调用map.setZoom(4)；或在您调用 map.setCenter() 后您需要的任何缩放级别。
是的，刚刚尝试过，没问题，但是我的意思是，动态添加或删除缩放的 -1 或 +1 怎么样？
你是对的，但我建议不要将全局范围与另一个变量混淆，我建议将 addDomListener(window, 'reszie'...) 声明移动到 initialize 函数内，这样可以在没有 @987654321 的情况下实现相同的结果@.
这是为我做的部分：google.maps.event.addDomListener(window, "resize", function() { var center = map.getCenter(); google.maps.event.trigger(map, "resize"); map.setCenter(center); });

【解决方案2】：

几年后，我搬到了传单地图，我已经完全解决了这个问题，以下也可以应用于谷歌地图：

    var headerHeight = $("#navMap").outerHeight();
    var footerHeight = $("footer").outerHeight();
    var windowHeight = window.innerHeight;
    var mapContainerHeight = headerHeight + footerHeight;
    var totalMapHeight = windowHeight - mapContainerHeight;
    $("#map").css("margin-top", headerHeight);
    $("#map").height(totalMapHeight);

    $(window).resize(function(){
        var headerHeight = $("#navMap").outerHeight();
        var footerHeight = $("footer").outerHeight();
        var windowHeight = window.innerHeight;
        var mapContainerHeight = headerHeight + footerHeight;
        var totalMapHeight = windowHeight - mapContainerHeight;
        $("#map").css("margin-top", headerHeight);
        $("#map").height(totalMapHeight);
        map.fitBounds(group1.getBounds());
    });

【讨论】：