Google地图根据窗口大小设置不同的缩放比例 [英] Google maps set different zoom based on window resize

问题描述

继我之前的问题 Google地图响应式调整大小之后，我想实施不同的缩放因为如果浏览器窗口小于应用x数量的缩放，并且主要比自动应用另一个缩放级别。

下面的代码有效完美地重新调整窗口大小的地图，我需要应用新的缩放级别：

  var map; 
函数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）; 
 map.setZoom（缩放级别需要根据窗口大小自动设置）; 
}）; 
  

解决方案

构建您希望始终处于查看范围内的区域创建 LatLngBounds 并调用 map.fitBounds（）。

Following to my previous question Google maps responsive resize I would like to implement a different zoom level based on windows resize, so if browser windows "less then" apply x number of zooming and if "major than" apply another zooming level automatically.

The following code works perfectly in regards of recentering the map on windows resize, I need to apply the new zoom levels to it:

var map; 
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(zoom level needs to be automatically set according to window size);
});

解决方案

Construct the area you want to always be in view by creating a LatLngBounds and call map.fitBounds() as suggested by geocodezip.

这篇关于Google地图根据窗口大小设置不同的缩放比例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！