根据屏幕/设备宽度设置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>