Google Maps API：防止拖入灰色区域答案

【问题标题】：Google Maps API: Prevent dragging into a grey areaGoogle Maps API：防止拖入灰色区域
【发布时间】：2011-05-07 21:07:29
【问题描述】：

我正在使用 Google Maps API (v3) 来呈现世界地图。当我一直放大（缩放级别 1）并开始拖动画布时，我能够移出地图边界，并且外面的区域显示为灰色。我想防止用户将地图拖到世界地图的边界之外。我该怎么做？

【问题讨论】：

标签： google-maps

【解决方案1】：

您可以设置 minZoom 和 maxZoom 以确保可用的缩放级别在您的范围内，希望有帮助吗？

【讨论】：

添加缩放级别不会阻止用户拖动地图以使灰色区域可见。
那只是放大地图，不是拖拽地图。
这不会阻止用户拖动到灰色区域

【解决方案2】：

var map;
function initialize() {
    var myLatlng = new google.maps.LatLng(0,0);
    var myOptions = {
      zoom: 1,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);	
	  map.addListener( 'drag', function() { handle(); });
	  //map.addListener( 'zoom_changed', function() { handle(); });
}

function handle(){
		var proj = map.getProjection();
		var bounds = map.getBounds();
		var sLat = map.getBounds().getSouthWest().lat();
		var nLat = map.getBounds().getNorthEast().lat();
		if (sLat < -85 || nLat > 85) {
			// alert('Gray area visible');
			map.setOptions({
			  zoom: 1,
              center: new google.maps.LatLng(
                  0 , // set Latitude for center of map here
                  0) // set Langitude for center of map here
              });         
			//Map.fitBounds(boundsNew); 
			// Or Define bound that u want show
		}
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps</title>
<script async defer src="https://maps.googleapis.com/maps/api/js">
</script>
</head>
<body onload="initialize()" >
<div id="map_canvas" style="width:500px;height:500px;"></div>
</body></html>

【讨论】：

干得好，复制+粘贴代码在多个级别上都不起作用（未使用的变量、缺失的变量、注释掉的代码），甚至没有描述。对于那些支持无用且质量低下的答案的人来说，这也是一件好事。
此解决方案无法正常工作，仍然获得三票：O
抱歉，我之前没有注意到您的评论@Kunal，“运行代码 sn-p”按钮显示谷歌地图并立即打开一个模式，显示“此页面无法正确加载谷歌地图” '
@towkir 这是 Google Maps API 的新功能。如此处所述developers.google.com/maps/billing/understanding-cost-of-use 所有 Google Maps Platform API 请求都必须包含 API 密钥；我们不再支持无钥匙访问。您需要为每个项目启用结算功能。

【解决方案3】：

我知道这个问题已经很老了，但我一直在寻找答案并找到了这篇文章。

我认为我的答案可能是对已接受答案的改进。

不要将用户送回任意中心，而是将地图移回灰色区域的边缘。

var map;
function initialize() {
    var myLatlng = new google.maps.LatLng(0,0);
    var myOptions = {
      zoom: 1,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);    
      map.addListener( 'drag', function() { handle(); });
      //map.addListener( 'zoom_changed', function() { handle(); });
}

function handle(){
    var bounds = map.getBounds();
    var center = map.getCenter();
    var sLat   = bounds.getSouthWest().lat();
    var nLat   = bounds.getNorthEast().lat();
    var cLat   = center.lat();
    var cLng   = center.lng();
    if (sLat < -85) {
        map.setOptions({
            center: new google.maps.LatLng(
                cLat + ((sLat + 85) * -1),
                cLng
            )
        )};
    }
    if (nLat > 85) {
        map.setOptions({
            center: new google.maps.LatLng(
                cLat - nLat + 85,
                cLng
            )
        )};
    }
}

希望这可以帮助某人。

【讨论】：

【解决方案4】：

Google Maps api 有相应的选项： https://developers.google.com/maps/documentation/javascript/reference/map#MapRestriction.latLngBounds。需要添加类似：

restriction: {
  latLngBounds: { north: 85, south: -85, west: -180, east: 180 }
}

到地图的初始选项。

【讨论】：