如何限制谷歌地图大小缩放不小于屏幕宽度/高度答案

【问题标题】：How to limit Google map size zoom not smaller than screen width/height如何限制谷歌地图大小缩放不小于屏幕宽度/高度
【发布时间】：2020-07-27 05:44:46
【问题描述】：

我对谷歌地图大小有疑问。缩放变化的地图图片可以比屏幕小，而且我在顶部和底部都有灰色条纹。

在 Google 地图 API 中，当我们使用缩放时，它们具有相同的条纹。但是https://www.google.com/maps/ 有一个限制，我们不能制作小于该大小的地图。

我怎样才能做出这样的限制？

【问题讨论】：

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

【解决方案1】：

使用strictBounds，边界纬度为 85/-85：

restriction: {
  latLngBounds: {
    north: 85,
    south: -85,
    west: -180,
    east: 180
  },
  strictBounds: true
}

proof of concept fiddle

代码 sn-p：

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 1,
    restriction: {
      latLngBounds: {
        north: 85,
        south: -85,
        west: -180,
        east: 180
      },
      strictBounds: true
    }
  });
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>

【讨论】：