谷歌地图：限制平移答案

【问题标题】：Google Maps: Limit Panning谷歌地图：限制平移
【发布时间】：2011-06-05 14:34:16
【问题描述】：

我正在尝试重新创建平移限制行为，如下所示： 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 maps API V3 中的平移？”但是，这种行为在视觉上会“快速”返回，而不是简单地限制超出边界的移动。 )

【问题讨论】：

试试这个帖子：stackoverflow.com/questions/3818016/…

标签： google-maps limit pan

【解决方案1】：

使用这篇文章中的示例：Google Maps v3 - limit viewable area and zoom level 并将地图侦听器事件从 dragend 更改为 drag。我刚刚对其进行了测试，它按预期工作。

编辑：Example at js fiddle

【讨论】：

这不是缩放安全方法。

【解决方案2】：

agm-map 中有一个名为restriction 的属性。限制是 MapRestriction 类型。您可以找到此属性 here 的 api 文档。如文档限制属性中所述，将平移和缩放限制在我们定义的限制之外。这是一个例子。

restriction: {
    latLngBounds:{
      north: 85.0, 
      south: -85.0, 
      west: -180.0, 
      east: 180.0
    },
    strictBounds : true
  }

我正在使用 Angular。很容易通过这个对象来限制平移。

【讨论】：

如何在地图中加入经纬度？我已经定义了纬度和经度，而不是 north... 等等。我已经使用 [restriction]="restriction" 绑定了值，但它不起作用