设置固定区域，但放大时出现问题（Google 地图 API）

Question

我有以下 JSFiddle（最初来自这个线程：Google Maps v3 - limit viewable area and zoom level) which presents the user with a fixed area of Google Maps: http://jsfiddle.net/9f3f82vw/4/

 // This is the minimum zoom level that we'll allow
 var minZoomLevel = 14;

 var map = new google.maps.Map(document.getElementById('map'), {
     zoom: minZoomLevel,
     center: new google.maps.LatLng(53.2170249, 6.5656727),
     mapTypeId: google.maps.MapTypeId.ROADMAP
 });

var marker = new google.maps.Marker({
    position: {lat: 53.218573, lng: 6.567293},
    map: map,
    title: '???'
});

 // Bounds for Groningen
 var strictBounds = new google.maps.LatLngBounds(
 new google.maps.LatLng(53.2124505, 6.5558022), //Southwest
 new google.maps.LatLng(53.2212904, 6.5760153)); //Northeast

 // Listen for the dragend event
 google.maps.event.addListener(map, 'bounds_changed', function () {
     if (strictBounds.contains(map.getCenter())) return;

     // We're out of bounds - Move the map back within the bounds

     var c = map.getCenter(),
         x = c.lng(),
         y = c.lat(),
         maxX = strictBounds.getNorthEast().lng(),
         maxY = strictBounds.getNorthEast().lat(),
         minX = strictBounds.getSouthWest().lng(),
         minY = strictBounds.getSouthWest().lat();

     if (x < minX) x = minX;
     if (x > maxX) x = maxX;
     if (y < minY) y = minY;
     if (y > maxY) y = maxY;

     map.setCenter(new google.maps.LatLng(y, x));
 });

 // Limit the zoom level
 google.maps.event.addListener(map, 'zoom_changed', function () {
     if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
 });

这个方案的问题是，一旦放大，就无法靠近靠近边界的区域。因此，如果您使用原始缩放比例 (14) 前往地图的南部并放大，您会发现您将无法完全向南。

换句话说，你不能放大边框。

编辑：我放弃了整个边界的东西，并实现了一个雾层，让用户知道有一个他无法访问的区域。我是在 http://maps.vasile.ch/geomask/

的帮助下完成的

谢谢！

Answer 1

如果您希望用户能够移动地图，并将其保持在原始边界内，strictBounds 在您的代码中，您只需处理可能使用户超出边界的事件，即拖动和缩放。然后，调用 map.panToBounds(strictBounds)。这将确保地图进行将视口保持在边界内所需的最小平移（反之亦然，具体取决于缩放级别）。

如果您不想使用 strictBounds，而是使用原始缩放级别的范围，您只需获取该范围并将其存储在一个变量中，然后将它们与 [=13= 一起使用].要获得它们，请使用 map.getBounds()。这些边界将在设置中心和缩放级别后可用。

设置固定区域，但放大时出现问题（Google 地图 API）

Set fixed area, but issues when zooming in (Google Maps API)

javascript

google-maps

zooming

google-maps-api-3