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

Question

我首先说我已经看过很多这样的答案，并且 this one是越来越近的东西。

所以基本上我做到了:

    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
      }, ...

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

知道为什么吗？

UDPATE

我尝试了以下方法:

    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

根据the documentation :

A restriction that can be applied to the Map. The map's viewport will not exceed these restrictions.

latLngBounds

Type: LatLngBounds|LatLngBoundsLiteral
When set, a user can only pan and zoom inside the given bounds. Bounds can restrict both longitude and latitude, or can restrict latitude only. For latitude-only bounds use west and east longitudes of -180 and 180, respectively. For example,
latLngBounds: {north: northLat, south: southLat, west: -180, east: 180}

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

proof of concept fiddle

代码片段:

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>