Google Maps v3 - 限制可视区域和缩放级别 [英] Google Maps v3 - limit viewable area and zoom level
问题描述
是否可以将谷歌地图 v3 限制在某个区域?我想只允许显示某些区域(例如一个国家/地区)并禁止用户在其他地方滑动.我也想限制缩放级别 - 例如仅在第 6 级和第 9 级之间.我想使用所有基本地图类型.
is it possible to limit Google map v3 to a certain area? I want to allow displaying only some area (e.g. a country) and disallow the user to slide elsewhere. Also I want to restrict the zoom level - e.g. only between levels 6 and 9. And I want to use all the base map types.
有什么办法可以做到这一点吗?
Is there any way to achieve this?
我通过使用 StyledMap 限制缩放级别取得了部分成功，但我只成功限制了 ROADMAP，我无法通过这种方式限制其他基本类型的缩放.
I had a partial success with limiting zoom level by using StyledMap, but I succeeded only with restricting ROADMAP, I wasn't able to limit zoom on other basic types this way.
感谢您的帮助
推荐答案
您可以监听 dragend 事件，如果地图被拖动到允许的范围之外，请将其移回内部.您可以在 LatLngBounds 对象，然后使用 contains() 方法检查新的 lat/lng 中心是否在边界内.
You can listen to the dragend event, and if the map is dragged outside the allowed bounds, move it back inside. You can define your allowed bounds in a LatLngBounds object and then use the contains() method to check if the new lat/lng center is within the bounds.
您还可以非常轻松地限制缩放级别.
You can also limit the zoom level very easily.
考虑以下示例:小提琴演示
Consider the following example: 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>
上述示例的屏幕截图.在这种情况下，用户将无法进一步向南或向东拖动:
Screenshot from the above example. The user will not be able to drag further south or far east in this case:
这篇关于Google Maps v3 - 限制可视区域和缩放级别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
