谷歌地图根据窗口大小设置不同的缩放

Google maps set different zoom based on window resize

本文关键字:缩放 设置 窗口大小 谷歌地图      更新时间:2023-09-26

根据我之前的问题,谷歌地图响应式调整大小。我希望在调整大小的同时,根据窗口的大小实现不同的缩放级别,因此,如果浏览器窗口"小于",则应用x个缩放数,如果"大于",则自动动态应用另一个缩放级别。

以下代码在重新调整窗口大小时可以完美地对地图进行居中,我需要对其应用新的缩放级别:

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

按照geocodezip的建议,通过创建LatLngBounds并调用map.fitBounds()来构建您希望始终在视图中的区域。