是否可以将谷歌地图 v3 限制在某个区域？我想只允许显示某些区域（例如一个国家/地区）并禁止用户在其他地方滑动。我还想限制缩放级别 - 例如，仅在级别 6 和 9 之间。我想使用所有基本地图类型。
有没有办法实现这一目标？
我通过使用 StyledMap 限制缩放级别取得了部分成功，但我仅通过限制 ROADMAP 成功，我无法以这种方式限制其他基本类型的缩放。
谢谢你的帮助
Google Maps v3 - 限制可视区域和缩放级别
IT技术
javascript
google-maps
google-maps-api-3
2021-01-18 01:58:37
6个回答
限制缩放级别的更好方法可能是使用minZoom/maxZoom选项而不是对事件做出react？
var opt = { minZoom: 6, maxZoom: 9 };
map.setOptions(opt);
或者可以在地图初始化期间指定选项，例如：
var map = new google.maps.Map(document.getElementById('map-canvas'), opt);
您可以收听该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>
上面例子的截图。在这种情况下，用户将无法进一步向南或向东拖动：
好消息。从 2019 年 2 月 14 日发布的 Maps JavaScript API 3.35 版本开始，您可以使用新restriction选项来限制地图的视口。
根据文档
MapRestriction 接口
可以应用于地图的限制。地图的视口不会超出这些限制。
来源：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>我希望这有帮助！
限制 v.3+ 的缩放。在您的地图设置中添加默认缩放级别和 minZoom 或 maxZoom（或两者，如果需要）缩放级别为 0 到 19。如果需要限制，您必须声明默认缩放级别。都是区分大小写的！
function initialize() {
var mapOptions = {
maxZoom:17,
minZoom:15,
zoom:15,
....
限制范围的更好方法......使用了上面海报中的包含逻辑。
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);
});