谷歌地图v3 - 限制可视区域和缩放级别 [英] Google Maps v3 - limit viewable area and zoom level
问题描述
是否可以将Google地图v3限制在某个区域？我想只允许显示某个区域（例如国家），并且不允许用户在别处滑动。另外我想限制缩放级别 - 例如只有级别6和9之间。我想要使用所有的基础地图类型。
有什么方法可以实现这一点？
通过使用StyledMap限制缩放级别，我取得了部分成功，但成功仅限于ROADMAP，我无法通过这种方式限制其他基本类型的缩放。
感谢您的帮助
dragend 事件，并且如果地图拖动到允许范围之外，请将其移回内部。您可以在 LatLngBounds中定义允许的边界 对象，然后使用 contains（）方法来检查新的lat / lng中心是否在界限内。
您也可以非常容易地限制缩放级别。
考虑以下示例： Fiddle Demo
<！DOCTYPE html>
< html>
< head>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/>
< title> Google Maps JavaScript API v3示例：限制平移和缩放< / title>
< script type =text / javascript
src =http://maps.google.com/maps/api/js?sensor=false>< / script>
< / head>
< body>
< div id =mapstyle =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
}）;
//北美的边界
var strictBounds = new google.maps.LatLngBounds（
new google.maps.LatLng（28.70，-127.50），
new google.maps.LatLng（48.85，-55.90）
）;
//监听dragend事件
google.maps.event.addListener（map，'dragend'，function（）{
if（strictBounds.contains（map.getCenter （））return;
//我们超出范围 - 将地图移回界限内
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
if（y
map.setCenter（new google.maps.LatLng（y，x））;
}）;
//限制缩放级别
google.maps.event.addListener（map，'zoom_changed'，function（）{
if（map.getZoom（））< minZoomLevel ）map.setZoom（minZoomLevel）;
}）;
< / script>
< / body>
< / html>
以上示例的屏幕截图。在这种情况下，用户将无法拖动到更远的南部或远东：
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?
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.
Thanks for any help
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:
这篇关于谷歌地图v3 - 限制可视区域和缩放级别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
