根据屏幕/设备宽度设置 Google Maps API V3 缩放级别答案

【问题标题】：Setting Google Maps API V3 Zoom level based on screen/device width根据屏幕/设备宽度设置 Google Maps API V3 缩放级别
【发布时间】：2015-01-07 09:53:36
【问题描述】：

我有以下代码在谷歌地图上显示 3 个标记。在大于 600 像素的屏幕宽度上，缩放级别设置为“13”，这很好。理想情况下，一旦屏幕/设备宽度低于 600 像素，我希望缩放级别降至“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>

【问题讨论】：

标签： javascript jquery google-maps google-maps-api-3

【解决方案1】：

使用 fitBounds：

创建一个 google.maps.LatLngBounds 对象
向其中添加所有标记位置
调用 map.fitBounds

代码sn-p：

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>

【讨论】：