在 V2 中，有一种方法可以限制平移/拖动，以便地图保持在一定范围内。在 V3 中是如何做到的？
假设我希望用户只关注欧洲。我已经限制了缩放，但是如果我允许拖动（在这种情况下我必须这样做，出于其他原因），那么用户可以平移到我想要显示的区域之外。
请给出工作示例或代码 sn-p - 我不是专业的编码员...
【问题讨论】：
restriction 选项来限制地图的视口。查看stackoverflow.com/a/54717220/5140781中的示例和解释。
标签： javascript google-maps google-maps-api-3
诀窍是监听dragend 事件，如果地图被拖到允许范围之外，则将其移回内部。如果您将允许的边界定义为 LatLngBounds 对象，则可以使用 contains() 方法，因为如果给定的 lat/lng 参数在边界内，它将返回 true。
限制缩放级别也很重要，但您似乎已经这样做了。
因此，您可能想尝试以下示例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Limit Panning</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px;"></div>
<script type="text/javascript">
var minZoomLevel = 5;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(38.50, -90.50),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Bounds for North America
var allowedBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(28.70, -127.50),
new google.maps.LatLng(48.85, -55.90));
// Listen for the dragend event
google.maps.event.addListener(map, 'dragend', function() {
if (allowedBounds.contains(map.getCenter())) return;
// Out of bounds - Move the map back within the bounds
var c = map.getCenter(),
x = c.lng(),
y = c.lat(),
maxX = allowedBounds.getNorthEast().lng(),
maxY = allowedBounds.getNorthEast().lat(),
minX = allowedBounds.getSouthWest().lng(),
minY = allowedBounds.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);
});
</script>
</body>
</html>
以上示例的屏幕截图。在这种情况下，用户将无法进一步向南或向东拖动：
【讨论】：
这是对the above 的一个很好的扩展，它将通过监听 dragstart 事件将地图的中心重置到最后一个有效位置。
// Limit panning
var lastCenter = map.getCenter();
google.maps.event.addListener(map, 'dragstart', function() {
lastCenter = map.getCenter();
});
google.maps.event.addListener(map, 'dragend', function() {
if(allowedBounds.contains(map.getCenter())) return;
map.setCenter(lastCenter);
});
【讨论】：
我想我参加聚会有点晚了，但由于这正是我刚才所需要的并且我对此进行了改进，所以我想我还是会发布一个答案。
有了Daniel Vassallo 和brendo 的答案，用户仍然可以使用平移控件（如果已激活）离开想要的区域。 @Yauhen.F 在评论中提到的事情。
所以我没有使用 dragend 事件，而是使用 center_changed 事件。在拖动过程中以及每次有人使用平移控件时都会连续触发。
// bounds of the desired area
var allowedBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(70.33956792419954, 178.01171875),
new google.maps.LatLng(83.86483689701898, -88.033203125)
);
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);
});
通过在拖动过程中连续保存最后一个有效位置，移动将在超出范围时停止，而不是在拖动结束后猛拉回来。 ......
【讨论】：
center_changed 事件是关键。但在移动 (iOS) 设备上仍然存在一些问题。
map.setCenter(...); 会比map.panTo(...); 更合适吗？后者似乎是潜在的奢侈（CPU），因为它的目的就是阻止平移死在其轨道上。
主题上有another thread也很好。我必须解决的问题是，我不想手动设置边界并检查中心包含，而是希望在页面加载时设置边界，然后在放大时允许拖动到边缘。
所以我在地图加载时设置了平移边界，一次。 然后我检查地图是否仍处于最大缩放状态，如果是，则返回初始中心。 如果放大，我想平移到初始边界的边缘，而不仅仅是检查 CENTER 是否包含，因为这会将允许的平移扩展到视口的一半。
不幸的是，虽然这样可以完成工作并且在缓慢平移时工作正常，但如果快速平移会有点生涩。
如果您对如何避免这种情况有任何建议，我将不胜感激。
map = new google.maps.Map( // defaults
document.getElementById("map22"),
{
disableDefaultUI : true,
zoomControl : true,
zoom : 7,
minZoom : 7,
maxZoom : 10,
center : new google.maps.LatLng(
64.99473104134819,
-19.22332763671875
),
mapTypeId : google.maps.MapTypeId.ROADMAP
}
);
function borders(){
return {
maxLat : map.getBounds().getNorthEast().lat(),
maxLng : map.getBounds().getNorthEast().lng(),
minLat : map.getBounds().getSouthWest().lat(),
minLng : map.getBounds().getSouthWest().lng(),
center : map.getCenter()
}
}
google.maps.event.addListenerOnce(map,'idle',function() {
limit = borders();
});
google.maps.event.addListener(map,'drag',function() {
if(map.getZoom() == 7) return map.setCenter(limit.center);
current = borders();
if( current.maxLng < limit.maxLng && current.minLng > limit.minLng ) activeCenterLng = current.center.lng();
if( current.maxLat < limit.maxLat && current.minLat > limit.minLat ) activeCenterLat = current.center.lat();
map.setCenter(
new google.maps.LatLng(
activeCenterLat,
activeCenterLng
)
);
});
【讨论】：
当我使用拖动或拖动或其他方式时，地图会跳回到允许的范围内，而不是简单地限制溢出的移动。只需将事件更改为 'center_changed' 即可阻止它像那样跳来跳去。
修改后的jsfiddle：http://jsfiddle.net/Vjdde/1/
编辑：不知道为什么小提琴不会产生堆栈溢出，但它应该，因为 setCenter 将再次调用 center_changed.. 小心
【讨论】：
我尝试了 HenningJ 的答案，地图不会停止平移，直到中心位于不理想的边界角落。这是我的解决方案：
google.maps.event.addListener(map, 'center_changed', function() {
var mapBounds = map.getBounds();
if(allowedBounds.contains(mapBounds.getNorthEast()) && allowedBounds.contains(mapBounds.getSouthWest())) {
lastCenter = map.getCenter();
return;
}
map.panTo(lastCenter);
}, this));
【讨论】：
我的版本基于@HenningJ 的版本，但对lastValidCenter 进行了一些修改，以允许沿边界平滑拖动。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(28.70, -127.50),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
// bounds of the desired area
var allowedBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(28.70, -127.50),
new google.maps.LatLng(48.85, -55.90)
);
var boundLimits = {
maxLat : allowedBounds.getNorthEast().lat(),
maxLng : allowedBounds.getNorthEast().lng(),
minLat : allowedBounds.getSouthWest().lat(),
minLng : allowedBounds.getSouthWest().lng()
};
var lastValidCenter = map.getCenter();
var newLat, newLng;
google.maps.event.addListener(map, 'center_changed', function() {
center = map.getCenter();
if (allowedBounds.contains(center)) {
// still within valid bounds, so save the last valid position
lastValidCenter = map.getCenter();
return;
}
newLat = lastValidCenter.lat();
newLng = lastValidCenter.lng();
if(center.lng() > boundLimits.minLng && center.lng() < boundLimits.maxLng){
newLng = center.lng();
}
if(center.lat() > boundLimits.minLat && center.lat() < boundLimits.maxLat){
newLat = center.lat();
}
map.panTo(new google.maps.LatLng(newLat, newLng));
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
【讨论】：
这里的解决方案给我留下了 2 个问题。首先，如果你按住箭头键让它开始快速平移，当它碰到边缘时，它不会一直走到边缘，因为平移加速度采取了很大的“步幅”，下一个“步骤”会超出范围，因此它不会采取最后一个“步骤”。因此，一旦它停止，您可以释放箭头键，然后再次按下它，它会平移一点点。其次，这些解决方案没有正确包含缩放更改后的平移。我设法解决了这两个问题，并发布了我的解决方案in another thread，但我想我会在这里链接它，因为这是第一次让我朝着正确方向开始的线程。
【讨论】：
最好的限制方法是，设置缩放级别和中心点，并禁用缩放、滚动等控件，如下所示。
var latlng = new google.maps.LatLng(18.283078,84.047556);
var myOptions = {
zoom: 12,
center: latlng,
zoomControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
disableDoubleClickZoom: true,
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
【讨论】：
这是 HenningJ - 但 ios 上的 HenningJ 使用 lastValidCentre - 这并不好，因为它是旧的，所以我钳制它，这使它在 iOS 上更好。
var mapObject = plugin_map.gmap3('get');
var allowedBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(41.3957556, -88.4345472),
new google.maps.LatLng(49.4010417, -78.4286389)
);
google.maps.event.addListener(mapObject, 'center_changed', function() {
if (allowedBounds.contains(mapObject.getCenter())) {
// still within valid bounds, so save the last valid position
return;
}
// not valid anymore => return to last valid position
var c = mapObject.getCenter(),
x = c.lng(),
y = c.lat(),
maxX = allowedBounds.getNorthEast().lng(),
maxY = allowedBounds.getNorthEast().lat(),
minX = allowedBounds.getSouthWest().lng(),
minY = allowedBounds.getSouthWest().lat();
if (x < minX) x = minX;
if (x > maxX) x = maxX;
if (y < minY) y = minY;
if (y > maxY) y = maxY;
//mapObject.setCenter(new google.maps.LatLng(y, x));
mapObject.panTo(new google.maps.LatLng(y, x));
});
【讨论】：
这是一个将 Tom Andersen 的答案和当前接受的 HenningJ 答案合并在一起的解决方案。这样做的好处是 1）允许沿边缘更平滑地滚动（HenningJ 的解决方案似乎很笨拙），以及 2）在放大一个区域时没有任何问题（再次，HenningJ 的答案在放大时似乎中断了并在边界附近）。
Tom 的回答对我来说几乎是可行的，除了它将锁定区域定位到屏幕的中心，这对于我正在处理的应用程序来说是不可接受的。
// bounds of the desired area
var allowedBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(70.33956792419954, 178.01171875),
new google.maps.LatLng(83.86483689701898, -88.033203125)
);
var lastValidCenter = map.getCenter();
google.maps.event.addListener(map, 'center_changed', function() {
var mapBounds = map.getBounds();
var mapNe = mapBounds.getNorthEast();
var mapSw = mapBounds.getSouthWest();
var center = map.getCenter();
if( allowedBounds.contains(mapNe) && allowedBounds.contains(mapSw) ) {
//the user is scrolling within the bounds.
lastValidCenter = center;
return;
}
//the user has scrolled beyond the edge.
var mapWidth = mapNe.lng() - mapSw.lng();
var mapHeight = mapNe.lat() - mapSw.lat();
var x = center.lng();
var y = center.lat();
var maxX = allowedBounds.getNorthEast().lng();
var maxY = allowedBounds.getNorthEast().lat();
var minX = allowedBounds.getSouthWest().lng();
var minY = allowedBounds.getSouthWest().lat();
//shift the min and max dimensions by 1/2 of the screen size, so the bounds remain at the edge of the screen
maxX -= (mapWidth / 2);
minX += (mapWidth / 2);
maxY -= (mapHeight / 2);
minY += (mapHeight / 2);
if (x < minX) {
x = minX;
}
if (x > maxX) {
x = maxX;
}
if (y < minY){
y = minY;
}
if (y > maxY){
y = maxY;
}
map.panTo(new google.maps.LatLng(y, x));
});
【讨论】：
如果有人感兴趣，我会发布我的答案，因为我无法通过此处发布的任何其他解决方案实现我所需要的。
我需要的是限制地图的垂直边界（纬度），这样用户就无法平移到地球的纬度边界之外（~ +/- 85 度），但任何其他边界都可以也是。
此方法使用与其他地方描述的相同的 center_changed 事件，并简单地固定中心，以防显示部分禁止边界。
此机制仅在设置了地图的最小缩放比例时才有效，这样缩小显示的区域永远不会超过允许范围内的区域。
function initMap() {
// sample bounds, can be anything and goes hand in hand with minZoom
var northBoundary = 40
var southBoundary = -40
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 0, lng: 0},
zoom: 4,
// it's important to set this to a large enough value
// so that zooming out does not show an area larger than allowed
minZoom: 4
})
map.addListener('center_changed', function () {
var bounds = map.getBounds();
var ne = bounds.getNorthEast()
var sw = bounds.getSouthWest()
var center = map.getCenter()
if(ne.lat() > northBoundary) {
map.setCenter({lat: center.lat() - (ne.lat() - northBoundary), lng: center.lng()})
}
if(sw.lat() < southBoundary) {
map.setCenter({lat: center.lat() - (sw.lat() - southBoundary), lng: center.lng()})
}
})
}
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="limit google map panning">
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
</body>
</html>
【讨论】：
我知道我参加聚会有点晚了，但似乎截至 2016 年年中，没有官方方法来限制可视区域。
有一些解决方案可以限制边界（其中一些在这个问题中），但对我来说，它们有一个缺陷，因为它们不会完全限制边界以适应地图视图，它们只会限制地图中心包含在指定的范围内。如果您想像我一样将边界限制为叠加图像，这可能会导致如下所示的行为，其中底层地图在我们的图像叠加层下可见：
为了解决这个问题，我创建了一个library，它成功地限制了边界，所以你不能平移出覆盖层。
但是，与其他现有解决方案一样，它存在“振动”问题。当用户足够积极地平移地图时，释放鼠标左键后，地图仍会继续自行平移，逐渐变慢。我总是将地图返回到边界，但这会导致某种振动，并在片刻后稳定下来。目前无法通过 Js API 提供的任何方式停止这种平移效果。似乎在谷歌添加对诸如 map.stopPanningAnimation() 之类的支持之前，我们将无法创建流畅的体验。
使用上述库的示例，我能获得的最流畅的严格边界体验：
function initialise(){
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(0,0),
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
addStrictBoundsImage(map);
}
function addStrictBoundsImage(map){
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(62.281819, -150.287132),
new google.maps.LatLng(62.400471, -150.005608));
var image_src = 'https://developers.google.com/maps/documentation/' +
'javascript/examples/full/images/talkeetna.png';
var strict_bounds_image = new StrictBoundsImage(bounds, image_src, map);
}<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("maps", "3",{other_params:"sensor=false"});
</script>
<body style="margin:0px; padding:0px;" onload="initialise()">
<div id="map" style="height:500px; width:1000px;"></div>
<script type="text/javascript"src="https://raw.githubusercontent.com/matej-pavla/StrictBoundsImage/master/StrictBoundsImage.js"></script>
</body>【讨论】：
这是一个适用于移动设备和桌面设备的简单解决方案。它将停止地图平移超出世界的最大或最小纬度，并允许设置最小缩放级别，这有助于防止灰色区域因放大得太远而变得可见（取决于您为地图设置的大小）：
（我建议按照 HenningJ 接受的答案中的建议谨慎使用 center_changed 事件。在我的情况下，这会导致 Google Chrome 中的堆栈溢出错误。相反，可以使用 'dragend' 事件 - 尽管这将允许用户拖动到区域之外，然后将立即“弹回”到地图的有效区域）。
var lastValidCenter;
var minZoomLevel = 2;
setOutOfBoundsListener();
function setOutOfBoundsListener() {
google.maps.event.addListener(map, 'dragend', function () {
checkLatitude(map);
});
google.maps.event.addListener(map, 'idle', function () {
checkLatitude(map);
});
google.maps.event.addListener(map, 'zoom_changed', function () {
checkLatitude(map);
});
};
function checkLatitude(map) {
if (this.minZoomLevel) {
if (map.getZoom() < minZoomLevel) {
map.setZoom(parseInt(minZoomLevel));
}
}
var bounds = map.getBounds();
var sLat = map.getBounds().getSouthWest().lat();
var nLat = map.getBounds().getNorthEast().lat();
if (sLat < -85 || nLat > 85) {
//the map has gone beyone the world's max or min latitude - gray areas are visible
//return to a valid position
if (this.lastValidCenter) {
map.setCenter(this.lastValidCenter);
}
}
else {
this.lastValidCenter = map.getCenter();
}
}
【讨论】：
新版 google map API 现在提供了一种限制边界的方法。 只需在初始化地图时指定您的限制边界。 例如，如果您只想将边界限制在新西兰，您可以这样做：
<body>
<div id="map"></div>
<script>
var map;
var NEW_ZEALAND_BOUNDS = {
north: -34.36,
south: -47.35,
west: 166.28,
east: -175.81,
};
var AUCKLAND = {lat: -37.06, lng: 174.58};
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: AUCKLAND,
restriction: {
latLngBounds: NEW_ZEALAND_BOUNDS,
strictBounds: false,
},
zoom: 7,
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
仅供参考：要限制整个世界的地图，您可以使用以下界限。这里棘手的部分是使用strictBounds:true。这将确保用户无法缩小世界视图：
map = new google.maps.Map(document.getElementById('map'), {
restriction: {
latLngBounds: {
north: 85,
south: -85,
west: -180,
east: 180
},
strictBounds: true,
},
zoom: 7,
});
【讨论】：