如何限制Google地图大小缩放不小于屏幕width/height

Question

我对 google 地图大小有疑问。缩放后的地图图片可以比屏幕小，比我上下都有灰色条纹。

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

如何设置这样的限制？

Answer 1

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

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

proof of concept fiddle

代码片段：

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>

如何限制Google地图大小缩放不小于屏幕width/height

How to limit Google map size zoom not smaller than screen width/height

google-maps

google-maps-api-3