0

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

我目前这样做：

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。

为了尝试解决这个缩放问题，我正在做一个 hack，但我认为这不是很好：

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/

4

1 回答 1

0

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

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

于 2013-11-09T23:19:46.103 回答