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

问题描述

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

响应式Google地图？和在浏览器上中心Google地图（V3） resize（响应式）

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

  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，调整大小）; 
 map.setCenter（center）; 
}）; 
  

html

 < div id =map-canvas/> 
  

css

  html {height：100％} 
 body {height：100％;保证金：0; padding：0} 
＃map-canvas {height：100％} 
  

解决方案

将您的地图变量移动到事件侦听器可以使用它的范围中。您在initialize（）函数内部创建了映射，并且在创建该方法时没有其他人可以使用它。

  var map; //<  - 现在可用于事件侦听器和initialize（）函数
函数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，调整大小）; 
 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屋！