谷歌地图响应式调整大小 [英] Google maps responsive resize

问题描述

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

响应式 Google 地图? 和 在浏览器调整大小(响应式)时将 Google 地图 (V3) 居中

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

 函数初始化() {var mapOptions = {中心:新的 google.maps.LatLng(40.5472,12.282715)，变焦:6，mapTypeId: google.maps.MapTypeId.ROADMAP};var map = new google.maps.Map(document.getElementById("map-canvas"),地图选项);}google.maps.event.addDomListener(window, 'load', initialize);google.maps.event.addDomListener(窗口，调整大小"，函数(){var center = map.getCenter();google.maps.event.trigger(地图，调整大小")；map.setCenter(center);});

html

css

html { 高度:100% }身体{高度:100%；边距:0；填充:0；}#map-canvas { 高度:100%；}

解决方案

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

var map;//<-- 现在可用于事件侦听器和 initialize() 函数函数初始化(){var mapOptions = {中心:新的 google.maps.LatLng(40.5472,12.282715)，变焦:6，mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById("map-canvas"),地图选项);}google.maps.event.addDomListener(window, 'load', initialize);google.maps.event.addDomListener(窗口，调整大小"，函数(){var center = map.getCenter();google.maps.event.trigger(地图，调整大小")；map.setCenter(center);});

I'm trying to get google maps responsive and resize while keeping its center when windows resizes. I read other stack questions in regards such as:

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

from the second stack question I got a link which helps me with part of the code but I still have no luck. This is the code I am using, when I resize the window, the maps doesn't resize at all

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

解决方案

Move your map variable into a scope where the event listener can use it. You are creating the map inside your initialize() function and nothing else can use it when created that way.

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

这篇关于谷歌地图响应式调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！