根據屏幕/設備寬度設置Google Maps API V3縮放級別

Question

我有以下代碼，它在Google地圖上顯示3個標記。 在大於600px的屏幕寬度上，縮放級別設置爲「13」，這很好。 理想情況下，一旦屏幕/設備寬度低於600px，我希望縮放級別降至「12」。

我一直在使用fitBounds（）試過了，看着的LatLngBounds，但我努力讓那些與我的代碼工作。這很簡單嗎？任何幫助將不勝感激。

我的代碼如下：

var map; 
 

 
var locations = [ 
 
    ['Location 1', 53.560410,-2.105351, 2], 
 
    ['Location 2', 53.532154, -2.165793, 1], 
 
    ['Location 3', 53.5386671,-2.1681325, 3] 
 
]; 
 

 
function bindInfoWindow(marker, map, infowindow, strDescription) { 
 
    google.maps.event.addListener(marker, 'click', function() { 
 
    infowindow.setContent(strDescription); 
 
    infowindow.open(map, marker); 
 
    }); 
 
} 
 

 
function setMarkers(map, locations) { 
 
    var infowindow = new google.maps.InfoWindow({ 
 
    content: "" 
 
    }); 
 

 

 
    var i, location, myLatLng, marker; 
 

 
    for (i = 0; i < locations.length; i++) { 
 
    location = locations[i]; 
 
    myLatLng = new google.maps.LatLng(location[1], location[2]); 
 
    marker = new google.maps.Marker({ 
 
     position: myLatLng, 
 
     map: map, 
 
     title: location[0], 
 
     zIndex: location[3] 
 
    }); 
 

 
    bindInfoWindow(marker, map, infowindow, location[0]); 
 
    } 
 
} 
 

 
function initialize() { 
 
    var mapOptions = { 
 
    zoom: 13, 
 
    center: new google.maps.LatLng(53.545701, -2.131714), 
 
    panControl: false, 
 
    disableDefaultUI: true, 
 
    zoomControl: true, 
 
    scrollwheel: false, 
 
    panControl: false, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 

 
    setMarkers(map, locations); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize); 
 
google.maps.event.addDomListener(window, 'resize', initialize); 
 
window.onpopstate = initialize();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
 
<div id="map-canvas" style="height:400px; width:100%;"></div>

Answer 1

要使用fitBounds：

1. 創建google.maps.LatLngBounds對象
2. 所有標記位置添加到它
3. call map.fitBo unds

代碼片段：

var map; 
 
var bounds = new google.maps.LatLngBounds(); 
 

 
var locations = [ 
 
    ['Location 1', 53.560410,-2.105351, 2], 
 
    ['Location 2', 53.532154, -2.165793, 1], 
 
    ['Location 3', 53.5386671,-2.1681325, 3] 
 
]; 
 

 
function bindInfoWindow(marker, map, infowindow, strDescription) { 
 
    google.maps.event.addListener(marker, 'click', function() { 
 
    infowindow.setContent(strDescription); 
 
    infowindow.open(map, marker); 
 
    }); 
 
} 
 

 
function setMarkers(map, locations) { 
 
    var infowindow = new google.maps.InfoWindow({ 
 
    content: "" 
 
    }); 
 

 

 
    var i, location, myLatLng, marker; 
 

 
    for (i = 0; i < locations.length; i++) { 
 
    location = locations[i]; 
 
    myLatLng = new google.maps.LatLng(location[1], location[2]); 
 
    marker = new google.maps.Marker({ 
 
     position: myLatLng, 
 
     map: map, 
 
     title: location[0], 
 
     zIndex: location[3] 
 
    }); 
 
    bounds.extend(marker.getPosition()); 
 

 
    bindInfoWindow(marker, map, infowindow, location[0]); 
 
    } 
 
} 
 

 
function initialize() { 
 
    var mapOptions = { 
 
    zoom: 13, 
 
    center: new google.maps.LatLng(53.545701, -2.131714), 
 
    panControl: false, 
 
    disableDefaultUI: true, 
 
    zoomControl: true, 
 
    scrollwheel: false, 
 
    panControl: false, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 

 
    setMarkers(map, locations); 
 
    map.fitBounds(bounds); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize); 
 
google.maps.event.addDomListener(window, 'resize', initialize); 
 
window.onpopstate = initialize();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
 
<div id="map-canvas" style="height:400px; width:100%;"></div>