如何限制Google Maps API V3中的平移？
E. *_*Tal 74 javascript google-maps google-maps-api-3
在V2中有一种限制平移/拖动的方法,因此地图保持在特定范围内.怎么在V3中完成？
假设我希望用户只看欧洲.我已经限制了缩放,但是如果我允许拖动(在这种情况下我必须出于其他原因),那么用户可以超出我想要显示的区域.
请给出工作示例或代码片段 - 我不是专家编码器......
谢谢!
Hen*_*ngJ 91
我想我参加派对有点晚了,但因为这正是我现在所需要的,而且我对此有所改进,我想我还是会发一个答案.
通过Daniel Vassallo和brendo的答案,用户仍然可以使用平移控制(如果它被激活)远离想要的区域.@ Yauhen.F在评论中提到的东西.
因此,我使用了center_changed事件,而不是使用dragend事件.在拖动期间以及每次有人使用平移控件时都会持续触发.
// bounds of the desired area
var allowedBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(70.33956792419954, 178.01171875),
new google.maps.LatLng(83.86483689701898, -88.033203125)
);
var lastValidCenter = map.getCenter();
google.maps.event.addListener(map, 'center_changed', function() {
if (allowedBounds.contains(map.getCenter())) {
// still within valid bounds, so save the last valid position
lastValidCenter = map.getCenter();
return;
}
// not valid anymore => return to last valid position
map.panTo(lastValidCenter);
});
通过在拖动过程中连续保存最后一个有效位置,一旦超出界限,移动就会停止,而不是在拖动结束后退回.......
- 这是一个很好的方法.我喜欢brendo的想法,但是这会将橡皮筋移回原位并在地图上停止地图.我使用这个转换为静态图像,没有平移,但使用动态标记.非常便利.谢谢! (2认同)
- 太棒了,`center_changed`事件是关键.但移动(iOS)设备仍存在一些问题. (2认同)
Dan*_*llo 21
诀窍是监听dragend事件,如果地图被拖到允许范围之外,则将其移回内部.如果将允许的边界定义为LatLngBounds对象,则可以使用该contains()方法,因为如果给定的lat/lng参数在边界内,则返回true.
限制缩放级别也很重要,但似乎你已经这样做了.
因此,您可能需要尝试以下示例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Limit Panning</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">
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 allowedBounds = 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 (allowedBounds.contains(map.getCenter())) return;
// Out of bounds - Move the map back within the bounds
var c = map.getCenter(),
x = c.lng(),
y = c.lat(),
maxX = allowedBounds.getNorthEast().lng(),
maxY = allowedBounds.getNorthEast().lat(),
minX = allowedBounds.getSouthWest().lng(),
minY = allowedBounds.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>
以上示例的屏幕截图.在这种情况下,用户将无法再向南或远东拖动:
- 在大地图上(当容器不是太小时),默认情况下还有允许用户导航的控件(导航面板).使用可左/右按箭头.所以你的事件不足以解决所有问题.您将需要捕获空闲事件.好的例子是http://code.google.com/p/gmaps-api-issues/issues/detail?id=1371一些人isaac.z.foster发布了它.但无论如何,采取行动然后重新设定的逻辑是非常糟糕的.即使是最丑陋的东西,默认谷歌地图显示在最大缩放级别几个世界.标记是重复的.Google代码非常糟糕. (2认同)
我的版本基于@HenningJ中的版本,但经过一些修改后lastValidCenter,可以沿边界平滑拖动.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(28.70, -127.50),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
// bounds of the desired area
var allowedBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(28.70, -127.50),
new google.maps.LatLng(48.85, -55.90)
);
var boundLimits = {
maxLat : allowedBounds.getNorthEast().lat(),
maxLng : allowedBounds.getNorthEast().lng(),
minLat : allowedBounds.getSouthWest().lat(),
minLng : allowedBounds.getSouthWest().lng()
};
var lastValidCenter = map.getCenter();
var newLat, newLng;
google.maps.event.addListener(map, 'center_changed', function() {
center = map.getCenter();
if (allowedBounds.contains(center)) {
// still within valid bounds, so save the last valid position
lastValidCenter = map.getCenter();
return;
}
newLat = lastValidCenter.lat();
newLng = lastValidCenter.lng();
if(center.lng() > boundLimits.minLng && center.lng() < boundLimits.maxLng){
newLng = center.lng();
}
if(center.lat() > boundLimits.minLat && center.lat() < boundLimits.maxLat){
newLat = center.lat();
}
map.panTo(new google.maps.LatLng(newLat, newLng));
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
在这里小提琴:http://jsfiddle.net/koenpunt/n7h6t/
新版本的谷歌地图API现在提供了一种限制边界的方法。只需在初始化地图时指定限制边界即可。例如，如果您想将边界限制为仅新西兰，则可以这样做：
<body>
<div id="map"></div>
<script>
var map;
var NEW_ZEALAND_BOUNDS = {
north: -34.36,
south: -47.35,
west: 166.28,
east: -175.81,
};
var AUCKLAND = {lat: -37.06, lng: 174.58};
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: AUCKLAND,
restriction: {
latLngBounds: NEW_ZEALAND_BOUNDS,
strictBounds: false,
},
zoom: 7,
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
仅供参考：要限制整个世界的地图，您可以使用以下边界。这里棘手的部分是使用strictBounds:true. 这将确保用户无法缩小世界视图：
map = new google.maps.Map(document.getElementById('map'), {
restriction: {
latLngBounds: {
north: 85,
south: -85,
west: -180,
east: 180
},
strictBounds: true,
},
zoom: 7,
});
| 归档时间： |
|
| 查看次数： |
55296 次 |
| 最近记录： |