logo标签列表

谷歌地图API：防止拖动进入灰色区域

google-maps
6

我正在使用Google Maps API（v3）来渲染世界地图。当我将地图缩放到最小（缩放级别为1）并开始拖动画布时，我能够移动到地图边界之外，并且超出区域显示为灰色。我希望防止用户将地图拖出世界地图的边界。我该如何做到这一点？

4个回答
2
1

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>

1
好的，复制和粘贴代码做得很好，但是这些代码存在多个问题（未使用的变量、缺失的变量、被注释掉的代码），而且没有任何描述。同时，那些点赞了这个无用低质量答案的人也做得很好。 - Christian
1
这个解决方案并没有正常工作，但仍然得到了三个赞 :O - Towkir
抱歉，我之前没有注意到你的评论 @Kunal， “运行代码片段”按钮会显示谷歌地图，并立即弹出一个模态框，显示“无法正确加载谷歌地图”的消息。 - Towkir
@towkir 这是Google Maps API的新功能。如此所述 https://developers.google.com/maps/billing/understanding-cost-of-use所有Google Maps平台API请求都必须包含API密钥；我们不再支持无密钥访问。 您需要在每个项目上启用计费。 - Julien B.
0

我知道这个问题很老了，但我正在寻找答案并发现了这篇文章。

我认为我的答案可能比被接受的答案更好。

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

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
你可以设置minZoom和maxZoom来确保可用的缩放级别在你的边界内，希望这有所帮助？
4
增加缩放级别不会阻止用户拖动地图以便显示灰色区域。 - JensB
1
那只是用于缩放，而不是拖动地图。 - Ivan Vulović
这不会阻止用户将内容拖动到灰色区域。 - Towkir
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接