0

私はGoogleマップをレスポンシブにしようとしていますが、サイズを変更したり解像度を変えたりすると、常に同じズームレベルで特定のエリアに焦点を当てています。

私は現在これを行います:

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/

4

1 に答える 1

0

画面のサイズに関係なく同じマップをユーザーに表示するという意味だと思うのでmap.getBounds()、境界を取得し、境界map.fitBounds(LatLngBounds)を設定するために使用します。

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

于 2013-11-09T23:19:46.103 に答える