Google 地图：限制平移
我正在尝试重新创建平移限制行为，如下所示： http://econym.org.uk/gmap/example_range.htm
不幸的是，它正在使用API 版本 2，而不是当前版本 3。我正在更新命令，以便它们是最新的，但我认为我可能错过了一些东西，因为它不起作用：
<html>
<body>
<script type="text/javascript" src="http://meyouand.us/scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(document).ready(function() {
// Generate map
var latlng = new google.maps.LatLng(37.76201, -122.4375);
var myOptions = { zoom: 12, center: latlng, panControl: false, zoomControl: true, mapTypeControl: false, streetViewControl: false, scrollwheel: true, draggable: true, mapTypeId: google.maps.MapTypeId.TERRAIN };
var map = new google.maps.Map(document.getElementById("gmap"), myOptions);
// Limit panning
// The allowed region which the whole map must be within
var southWest = new google.maps.LatLng(37.684, -122.591);
var northEast = new google.maps.LatLng(37.836, -122.333);
var allowedBounds = new google.maps.LatLngBounds(southWest, northEast);
// Double check boundaries, plot points just in case
var sW = new google.maps.Marker({
position: southWest,
map: map,
title: "southWest"
});
var nE = new google.maps.Marker({
position: northEast,
map: map,
title: "northEast"
});
// Add a move listener to restrict the bounds range
google.maps.event.addListener(map, "dragend", function() { checkBounds(); });
// If the map position is out of range, move it back
function checkBounds() {
// Perform the check and return if OK
if (allowedBounds.contains(map.getCenter())) {
return;
}
// It's not OK, so find the nearest allowed point and move there
var C = map.getCenter();
var X = C.lng();
var Y = C.lat();
var AmaxX = allowedBounds.getNorthEast().lng();
var AmaxY = allowedBounds.getNorthEast().lat();
var AminX = allowedBounds.getSouthWest().lng();
var AminY = allowedBounds.getSouthWest().lat();
if (X < AminX) {X = AminX; alert('hi') }
if (X > AmaxX) {X = AmaxX; alert('hi') }
if (Y < AminY) {Y = AminY; alert('hi') }
if (Y > AmaxY) {Y = AmaxY; alert('hi') }
alert ("Restricting "+Y+" "+X);
map.setCenter(new LatLng(Y,X));
}
});
</script>
<body>
<div id="gmap" style="width: 480px; height: 440px;"></div>
</body>
</html>
有人介意借出另一双眼睛看看我是否错过了某物？ :D
（StackOverflow 上还有另一个最新的版本 3 代码，名为“如何限制 Google 地图 API V3 中的平移？”但是，该行为在视觉上“快速”返回，而不是简单地限制超出边界的移动。）
I'm trying to recreate the pan limit behavior as demonstrated here:
http://econym.org.uk/gmap/example_range.htm
Unfortunately, it's using the API version 2, instead of the current version 3. I'm updating the commands so that they are current, but I think I might have missed something because it's not working:
<html>
<body>
<script type="text/javascript" src="http://meyouand.us/scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(document).ready(function() {
// Generate map
var latlng = new google.maps.LatLng(37.76201, -122.4375);
var myOptions = { zoom: 12, center: latlng, panControl: false, zoomControl: true, mapTypeControl: false, streetViewControl: false, scrollwheel: true, draggable: true, mapTypeId: google.maps.MapTypeId.TERRAIN };
var map = new google.maps.Map(document.getElementById("gmap"), myOptions);
// Limit panning
// The allowed region which the whole map must be within
var southWest = new google.maps.LatLng(37.684, -122.591);
var northEast = new google.maps.LatLng(37.836, -122.333);
var allowedBounds = new google.maps.LatLngBounds(southWest, northEast);
// Double check boundaries, plot points just in case
var sW = new google.maps.Marker({
position: southWest,
map: map,
title: "southWest"
});
var nE = new google.maps.Marker({
position: northEast,
map: map,
title: "northEast"
});
// Add a move listener to restrict the bounds range
google.maps.event.addListener(map, "dragend", function() { checkBounds(); });
// If the map position is out of range, move it back
function checkBounds() {
// Perform the check and return if OK
if (allowedBounds.contains(map.getCenter())) {
return;
}
// It's not OK, so find the nearest allowed point and move there
var C = map.getCenter();
var X = C.lng();
var Y = C.lat();
var AmaxX = allowedBounds.getNorthEast().lng();
var AmaxY = allowedBounds.getNorthEast().lat();
var AminX = allowedBounds.getSouthWest().lng();
var AminY = allowedBounds.getSouthWest().lat();
if (X < AminX) {X = AminX; alert('hi') }
if (X > AmaxX) {X = AmaxX; alert('hi') }
if (Y < AminY) {Y = AminY; alert('hi') }
if (Y > AmaxY) {Y = AmaxY; alert('hi') }
alert ("Restricting "+Y+" "+X);
map.setCenter(new LatLng(Y,X));
}
});
</script>
<body>
<div id="gmap" style="width: 480px; height: 440px;"></div>
</body>
</html>
Would someone mind lending another set of eyes to see if I missed something? :D
(There is another up-to-date version 3 code here on StackOverflow called 'How do I limit panning in Google maps API V3?' However that behavior visually "snaps" back rather than simply limiting the movement beyond the boundaries.)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
使用这篇文章中的示例：Google 地图 v3 - 限制可视区域和缩放级别并将地图侦听器事件从
dragend更改为drag。我刚刚测试过它并且它按预期工作。
编辑： js fiddle 的示例
Use example from this post: Google Maps v3 - limit viewable area and zoom level and change map listener event from
dragendtodrag.I've just tested it and it works as expected.
EDIT: Example at js fiddle
agm-map中有一个名为restriction的属性。限制是 MapRestriction 类型。
您可以在此处找到此属性的 API 文档。
正如文档限制属性中所述，限制平移和缩放超出我们定义的限制。这是一个例子。
我正在使用角度。很容易通过这个对象来限制平移。
There is attribute in agm-map named restriction. restriction is MapRestriction Type.
you can find the api doc for this attribute here.
as said in the doc restriction attribute restricts panning and zooming beyond the limit we define. here is an example.
I was working with angular. It was easy to pass this object to limit the panning.