如何防止在谷歌地图上平移外部世界边缘？

Question

我首先要说的是，我已经看过很多这样的答案，而这个是最接近的。

所以基本上我做了：

    var defaultLatLong = {
        lat: 45.4655171, 
        lng: 12.7700794
    };

    var map = new google.maps.Map(document.getElementById('map'), {
      center: defaultLatLong,
      zoom: 3,
      minZoom: 3,
      restriction: {
        latLngBounds: {
          east: 180,
          north: 85,
          south: -85,
          west: -180
        },
        strictBounds: true
      }, ...

但这会阻止在左/右平移时进行顶部/底部平移。

知道为什么吗？

UDP日期

我尝试了以下方法：

    var allowedBounds = new google.maps.LatLngBounds(
         new google.maps.LatLng(85, 180), 
         new google.maps.LatLng(-85, -180)
    );
    var lastValidCenter = map.getCenter();

    google.maps.event.addListener(map, 'center_changed', function() {
        if (allowedBounds.contains(map.getCenter())) {
          // still within valid bounds, so save the last valid position
          lastValidCenter = map.getCenter();
          return; 
        }
        // not valid anymore => return to last valid position
        map.panTo(lastValidCenter);
    });

但是，虽然它停止水平平移，但我无法平移到两极，因此顶部/底部

Answer 1

根据文档：

可应用于地图的限制。地图的视口不会超出这些限制。

latLngBounds

类型： LatLngBounds|LatLngBoundsLiteral
设置后，用户只能在给定范围内平移和缩放。边界可以同时限制经度和纬度，也可以仅限制纬度。对于仅纬度边界，分别使用西经度和东经度 -180 度和 180 度。例如，
latLngBounds：{北：northLat，南：southLat，西：-180，东：180}

将经度限制设置为非 -180/+180。

概念证明小提琴

代码片段：

function initMap() {
  var defaultLatLong = {
    lat: 45.4655171,
    lng: 12.7700794
  };

  var map = new google.maps.Map(document.getElementById('map'), {
    center: defaultLatLong,
    zoom: 3,
    minZoom: 3,
    restriction: {
      latLngBounds: {
        east: 179.9999,
        north: 85,
        south: -85,
        west: -179.9999
      },
      strictBounds: true
    }
  });
}

html,
body,
#map {
  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>