Google地图：限制平移 [英] Google Maps: Limit Panning
问题描述
我尝试重新创建泛极限行为，如下所示：
http： //econym.org.uk/gmap/example_range.htm
I'm trying to recreate the pan limit behavior as demonstrated here: http://econym.org.uk/gmap/example_range.htm
不幸的是，它使用的是API版本2，而不是当前的版本3。 m更新命令，使它们是最新的，但我想我可能错过了一些东西，因为它不工作：
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>
有人会介意借给我另一双眼睛看我是否遗漏了一些东西吗？ ：D
Would someone mind lending another set of eyes to see if I missed something? :D
（StackOverflow上还有另一个最新的版本3代码，名为'我如何限制Google Maps API V3中的平移''但是， 快照，而不是简单地限制超出边界的移动。）
(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.)
推荐答案
使用此帖子中的示例： Google地图v3 - 限制可见区域和缩放级别并更改地图侦听器从 dragend 到 drag 的事件。
我刚测试过它，它按预期工作。
Use example from this post: Google Maps v3 - limit viewable area and zoom level and change map listener event from dragend to drag.
I've just tested it and it works as expected.
编辑： js小提琴示例
这篇关于Google地图：限制平移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
