是否可以将 Google 地图 v3 限制在某个区域？我想只允许显示某个区域（例如一个国家）并禁止用户在其他地方滑动。我也想限制缩放级别 - 例如仅在 6 级和 9 级之间。我想使用所有基本地图类型。
有什么方法可以实现吗？
我通过使用 StyledMap 在限制缩放级别方面取得了部分成功，但我仅在限制 ROADMAP 方面取得了成功，我无法通过这种方式限制其他基本类型的缩放。
感谢您的帮助
【问题讨论】：
标签： javascript google-maps google-maps-api-3
您可以收听dragend 事件，如果地图被拖到允许范围之外，请将其移回内部。您可以在 LatLngBounds 对象中定义允许的边界，然后使用 contains() 方法检查新的纬度/经度中心是否在边界内。
您还可以非常轻松地限制缩放级别。
考虑以下示例：Fiddle Demo
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Limit Panning and Zoom</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">
// This is the minimum zoom level that we'll allow
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 strictBounds = 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 (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);
});
</script>
</body>
</html>
以上示例的屏幕截图。在这种情况下，用户将无法进一步向南或向东拖动：
【讨论】：
if (x < minX) x = minX; 和if (x > maxX) x = maxX; 不互相排斥？为什么将画布居中在 minX/maxX 和 maxX/maxY 坐标上，尽管它们不是中心坐标？
draggable: false 而不是 dragend 事件
center_changed 事件而不是 dragend，这对我来说非常有效。
限制缩放级别的更好方法可能是使用minZoom/maxZoom 选项而不是对事件做出反应？
var opt = { minZoom: 6, maxZoom: 9 };
map.setOptions(opt);
或者可以在地图初始化时指定选项，例如：
var map = new google.maps.Map(document.getElementById('map-canvas'), opt);
【讨论】：
限制范围的更好方法...使用了上面海报中的包含逻辑。
var dragStartCenter;
google.maps.event.addListener(map, 'dragstart', function(){
dragStartCenter = map.getCenter();
});
google.maps.event.addListener(this.googleMap, 'dragend', function(){
if (mapBounds.contains(map.getCenter())) return;
map.setCenter(this.dragStart);
});
【讨论】：
this.googleMap 而不是map？ dragStart 也不应该是 dragStartCenter 吗？最后mapBounds是什么？
这是我解决可视区域限制问题的变体。
google.maps.event.addListener(this.map, 'idle', function() {
var minLat = strictBounds.getSouthWest().lat();
var minLon = strictBounds.getSouthWest().lng();
var maxLat = strictBounds.getNorthEast().lat();
var maxLon = strictBounds.getNorthEast().lng();
var cBounds = self.map.getBounds();
var cMinLat = cBounds.getSouthWest().lat();
var cMinLon = cBounds.getSouthWest().lng();
var cMaxLat = cBounds.getNorthEast().lat();
var cMaxLon = cBounds.getNorthEast().lng();
var centerLat = self.map.getCenter().lat();
var centerLon = self.map.getCenter().lng();
if((cMaxLat - cMinLat > maxLat - minLat) || (cMaxLon - cMinLon > maxLon - minLon))
{ //We can't position the canvas to strict borders with a current zoom level
self.map.setZoomLevel(self.map.getZoomLevel()+1);
return;
}
if(cMinLat < minLat)
var newCenterLat = minLat + ((cMaxLat-cMinLat) / 2);
else if(cMaxLat > maxLat)
var newCenterLat = maxLat - ((cMaxLat-cMinLat) / 2);
else
var newCenterLat = centerLat;
if(cMinLon < minLon)
var newCenterLon = minLon + ((cMaxLon-cMinLon) / 2);
else if(cMaxLon > maxLon)
var newCenterLon = maxLon - ((cMaxLon-cMinLon) / 2);
else
var newCenterLon = centerLon;
if(newCenterLat != centerLat || newCenterLon != centerLon)
self.map.setCenter(new google.maps.LatLng(newCenterLat, newCenterLon));
});
strictBounds 是new google.maps.LatLngBounds() 类型的对象。 self.gmap 存储一个 Google 地图对象 (new google.maps.Map())。
它确实有效，但如果你的界限覆盖它们，不要只忘记考虑跨越第 0 个经络和平行线的痔疮。
【讨论】：
由于某种原因
if (strictBounds.contains(map.getCenter())) return;
对我没用（可能是南半球问题）。我不得不将其更改为：
function checkBounds() {
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 > maxX || y < minY || y > maxY) {
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));
}
}
希望对某人有所帮助。
【讨论】：
这可能会有所帮助。
var myOptions = {
center: new google.maps.LatLng($lat,$lang),
zoom: 7,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
缩放级别可根据需要自定义。
【讨论】：
e.g. only between levels 6 and 9 范围内的原始问题，它设置了 default 缩放级别并删除了默认 UI（即 @987654323 @/-) 这有点矫枉过正。
一个解决方案就像，如果你知道具体的纬度/经度。
google.maps.event.addListener(map, 'idle', function() {
map.setCenter(new google.maps.LatLng(latitude, longitude));
map.setZoom(8);
});
如果没有特定的纬度/经度
google.maps.event.addListener(map, 'idle', function() {
map.setCenter(map.getCenter());
map.setZoom(8);
});
或
google.maps.event.addListener(map, 'idle', function() {
var bounds = new google.maps.LatLngBounds();
map.setCenter(bounds.getCenter());
map.setZoom(8);
});
【讨论】：
在 v.3+ 上限制缩放。 在您的地图设置中添加默认缩放级别和 minZoom 或 maxZoom（或两者如果需要） 缩放级别为 0 到 19。 如果需要限制，您必须声明默认缩放级别。都区分大小写！
function initialize() {
var mapOptions = {
maxZoom:17,
minZoom:15,
zoom:15,
....
【讨论】：
这可用于将地图重新居中到特定位置。这是我需要的。
var MapBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(35.676263, 13.949096),
new google.maps.LatLng(36.204391, 14.89038));
google.maps.event.addListener(GoogleMap, 'dragend', function ()
{
if (MapBounds.contains(GoogleMap.getCenter()))
{
return;
}
else
{
GoogleMap.setCenter(new google.maps.LatLng(35.920242, 14.428825));
}
});
【讨论】：
myOptions = {
center: myLatlng,
minZoom: 6,
maxZoom: 9,
styles: customStyles,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
【讨论】：
截至 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:400px; width:500px;"></div>
<script type="text/javascript"src="https://raw.githubusercontent.com/matej-pavla/StrictBoundsImage/master/StrictBoundsImage.js"></script>
</body>该库还能够自动计算最小缩放限制。然后它使用minZoom 地图的属性限制缩放级别。
希望这可以帮助那些想要一个完全尊重给定边界并且不想让他们摆脱它们的解决方案的人。
【讨论】：
好消息。从 2019 年 2 月 14 日推出的 Maps JavaScript API 3.35 版开始，您可以使用新的restriction 选项来限制地图的视口。
根据文档
地图限制接口
可以应用于地图的限制。地图的视口不会超出这些限制。
来源：https://developers.google.com/maps/documentation/javascript/reference/map#MapRestriction
所以，现在您只需在地图初始化期间添加限制选项即可。请看以下将视口限制为瑞士的示例
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 46.818188, lng: 8.227512},
minZoom: 7,
maxZoom: 14,
zoom: 7,
restriction: {
latLngBounds: {
east: 10.49234,
north: 47.808455,
south: 45.81792,
west: 5.95608
},
strictBounds: true
},
});
}#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap" async defer></script>我希望这会有所帮助！
【讨论】：