Question

当我们调整大小或使用不同分辨率时，我试图让谷歌地图响应并始终具有相同的缩放级别以专注于特定区域。

我目前这样做：

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

这很好但是当我们调整窗口大小时，需要更改缩放级别以便始终专注于Med。

为了解决这个缩放问题，我正在做一个黑客攻击，但我认为这不好：

if($(window).width() > 1600) {
 map.setZoom(6);
} 
if($(window).width() < 1024) {
map.setZoom(5);
} 
if($(window).width() < 800) {
 map.setZoom(4);
}

我读到了通过创建LatLngBounds并调用map.fitBounds（）来构建我想要始终在视图中的区域，但我没有得到它。你的jsfiddle非常乐于助人。

这是我的jsfiddle：http://jsfiddle.net/tVKMn/7/

Answer 1

由于我认为您的意思是用户无论屏幕大小如何都能看到相同的地图，因此请使用map.getBounds()来获取边界，并使用map.fitBounds(LatLngBounds)来设置边界。

https://developers.google.com/maps/documentation/javascript/reference#Autocomplete

响应式gmap，在特定区域始终具有正确的缩放级别

1 个答案: