Google Maps v3 - 限制可视区域和缩放级别
Tom*_*mik 94 javascript google-maps google-maps-api-3
是否可以将Google地图v3限制在某个区域？我想允许只显示某个区域(例如国家/地区)并禁止用户滑动到其他位置.此外,我想限制缩放级别 - 例如仅在级别6和9之间.我想使用所有基本地图类型.
有没有办法实现这个目标？
我通过使用StyledMap限制缩放级别取得了部分成功,但我仅限制了ROADMAP,我无法通过这种方式限制其他基本类型的缩放.
谢谢你的帮助
Chr*_*isV 176
限制缩放级别的更好方法可能是使用minZoom/ maxZoom选项而不是对事件做出反应？
var opt = { minZoom: 6, maxZoom: 9 };
map.setOptions(opt);
或者可以在地图初始化期间指定选项,例如:
var map = new google.maps.Map(document.getElementById('map-canvas'), opt);
请参阅:Google Maps JavaScript API V3参考
- 设置缩放级别对平移没有影响. (8认同)
- 对于那些只关注所选答案的人来说,这应该被标记为答案. (3认同)
- 现在这肯定是限制缩放级别的最佳方法.当我撰写帖子时,Maps API v3中没有该功能.值得庆幸的是,他们不断改进API. (2认同)
- 这很完美,这应该是缩放的最佳答案. (2认同)
Dan*_*llo 119
您可以收听dragend事件,如果地图被拖到允许的边界之外,则将其移回内部.您可以在LatLngBounds对象中定义允许的边界,然后使用该contains()方法检查新的lat/lng中心是否在边界内.
您还可以非常轻松地限制缩放级别.
请考虑以下示例: 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坐标中心,尽管它们不是中心坐标？ (2认同)
xom*_*ena 12
好消息。从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>我希望这有帮助！
小智 6
限制v.3 +的缩放.在地图设置中添加默认缩放级别和minZoom或maxZoom(或两者,如果需要)缩放级别为0到19.如果需要限制,则必须声明deafult缩放级别.一切都区分大小写!
function initialize() {
var mapOptions = {
maxZoom:17,
minZoom:15,
zoom:15,
....
| 归档时间： |
|
| 查看次数： |
133811 次 |
| 最近记录： |