Google 地图响应式调整大小

Question

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

响应式谷歌地图？ 和 在浏览器调整大小（响应式）时居中谷歌地图（V3）

从第二个堆栈问题我得到了一个链接，帮助我部分代码，但我仍然没有运气。这是我正在使用的代码，当我调整窗口大小时，地图根本不会调整大小。

    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%; }

- rob.m

---

你的问题回答了我的疑问！谢谢！ - Guillermo Gutiérrez

@GuillermoGutiérrez 哪一个？ - nilon

@nilon 我还没有发布它，但是它是关于如何使用Javascript API在Google Maps中设置地图中心的。 - Guillermo Gutiérrez

Answer 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); 
});

- rsnickell

---

太棒了，这刚刚完美地运行了，我们是否可以在窗口调整大小时添加缩放变化的方式？ - rob.m

是的，您可以在调用map.setCenter()之后立即调用map.setZoom(4)或任何所需的缩放级别。 - rsnickell

是的，我刚试过了，没问题。但是如果要获取-1或+1，也就是动态添加或删除缩放，怎么办呢？ - rob.m

你是正确的，但是我建议将addDomListener(window, 'resize'...)声明移动到initialize函数内部，而不是在全局范围内添加另一个变量，这样可以在不带来全局变量带来的风险的情况下实现相同的结果。 - gfullam

这是让我成功的部分：`google.maps.event.addDomListener(window, "resize", function() { var center = map.getCenter(); google.maps.event.trigger(map, "resize"); map.setCenter(center); });` - Ricardo Zea

Answer 2

几年后，我转向了leaflet地图，并且完全解决了这个问题，以下方法也适用于谷歌地图：

    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());
    });

- rob.m