是否可以将Google Map v3限制在某个区域?我只允许显示某些区域(例如国家/地区),而不允许用户滑动到其他位置。另外,我想限制缩放级别- 例如仅在6和9级之间。并且我想使用所有基本地图类型。
有什么办法可以做到这一点?
通过使用StyledMap,我在限制缩放级别方面取得了部分成功,但仅在限制ROADMAP方面获得了成功,因此无法以这种方式来限制其他基本类型的缩放。
谢谢你的帮助
您可以听dragend事件,如果将地图拖到允许的范围之外,请将其移回内部。您可以在LatLngBounds对象中定义允许的范围,然后使用该contains()方法检查新的经纬度中心是否在范围内。
dragend
LatLngBounds
contains()
您也可以非常轻松地限制缩放级别。
考虑以下示例: [Fiddle Demo](http://jsfiddle.net/cse_tushar/9d4jy4ye/)
[Fiddle Demo](http://jsfiddle.net/cse_tushar/9d4jy4ye/)
<!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>
上面示例的屏幕截图。在这种情况下,用户将无法向南或向东拖动: