Javascript 如何限制Google maps API V3中的平移？_Javascript_Google Maps_Google Maps Api 3

Javascript 如何限制Google maps API V3中的平移？

javascript google-maps google-maps-api-3

Javascript 如何限制Google maps API V3中的平移？,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,在V2中，有一种方法可以限制平移/拖动，使地图保持在特定范围内。在V3中是如何实现的比方说，我希望用户只关注欧洲。我已经限制了缩放，但是如果我允许拖动（在本例中，由于其他原因，我必须这样做），那么用户可以平移到我想要显示的区域之外请给出工作示例或代码片段-我不是一个专业的程序员诀窍是监听dragend事件，如果地图被拖出允许的边界，则将其移回内部。如果将允许的边界定义为对象，则可以使用contains（）方法，因为如果给定的lat/lng参数在边界内，它将返回true <!DOCTY

在V2中，有一种方法可以限制平移/拖动，使地图保持在特定范围内。在V3中是如何实现的

比方说，我希望用户只关注欧洲。我已经限制了缩放，但是如果我允许拖动（在本例中，由于其他原因，我必须这样做），那么用户可以平移到我想要显示的区域之外

请给出工作示例或代码片段-我不是一个专业的程序员

诀窍是监听

dragend

事件，如果地图被拖出允许的边界，则将其移回内部。如果将允许的边界定义为对象，则可以使用

contains（）

方法，因为如果给定的lat/lng参数在边界内，它将返回true

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0 }
            #map-canvas { height: 100% }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false"></script>
        </script>
        <script type="text/javascript">
            function initialize() {
                var mapOptions = {
                    center: new google.maps.LatLng(28.70, -127.50),
                    zoom: 4,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map-canvas"),
                        mapOptions);

                // bounds of the desired area
                var allowedBounds = new google.maps.LatLngBounds(
                  new google.maps.LatLng(28.70, -127.50),
                  new google.maps.LatLng(48.85, -55.90)
                );
                var boundLimits = {
                    maxLat : allowedBounds.getNorthEast().lat(),
                    maxLng : allowedBounds.getNorthEast().lng(),
                    minLat : allowedBounds.getSouthWest().lat(),
                    minLng : allowedBounds.getSouthWest().lng()
                };

                var lastValidCenter = map.getCenter();
                var newLat, newLng;
                google.maps.event.addListener(map, 'center_changed', function() {
                    center = map.getCenter();
                    if (allowedBounds.contains(center)) {
                        // still within valid bounds, so save the last valid position
                        lastValidCenter = map.getCenter();
                        return;
                    }
                    newLat = lastValidCenter.lat();
                    newLng = lastValidCenter.lng();
                    if(center.lng() > boundLimits.minLng && center.lng() < boundLimits.maxLng){
                        newLng = center.lng();
                    }
                    if(center.lat() > boundLimits.minLat && center.lat() < boundLimits.maxLat){
                        newLat = center.lat();
                    }
                    map.panTo(new google.maps.LatLng(newLat, newLng));
                });
            }
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="map-canvas"/>
    </body>
</html>

限制缩放级别也很重要，但您似乎已经在这样做了

因此，您可能希望尝试以下示例：

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps JavaScript API v3 Example: Limit Panning</title> 
   <script type="text/javascript" 
           src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head> 
<body> 
   <div id="map" style="width: 400px; height: 300px;"></div> 

   <script type="text/javascript"> 

   var minZoomLevel = 5;

   var map = new google.maps.Map(document.getElementById('map'), {
      zoom: minZoomLevel,
      center: new google.maps.LatLng(38.50, -90.50),
      mapTypeId: google.maps.MapTypeId.ROADMAP
   });

   // Bounds for North America
   var allowedBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(28.70, -127.50), 
     new google.maps.LatLng(48.85, -55.90));

   // Listen for the dragend event
   google.maps.event.addListener(map, 'dragend', function() {
     if (allowedBounds.contains(map.getCenter())) return;

     // Out of bounds - Move the map back within the bounds

     var c = map.getCenter(),
         x = c.lng(),
         y = c.lat(),
         maxX = allowedBounds.getNorthEast().lng(),
         maxY = allowedBounds.getNorthEast().lat(),
         minX = allowedBounds.getSouthWest().lng(),
         minY = allowedBounds.getSouthWest().lat();

     if (x < minX) x = minX;
     if (x > maxX) x = maxX;
     if (y < minY) y = minY;
     if (y > maxY) y = maxY;

     map.setCenter(new google.maps.LatLng(y, x));
   });

   // Limit the zoom level
   google.maps.event.addListener(map, 'zoom_changed', function() {
     if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
   });

   </script> 
</body> 
</html>


谷歌地图JavaScript API v3示例：限制平移
var minZoomLevel=5；
var map=new google.maps.map（document.getElementById（'map'）{
zoom:minZoomLevel，
中心：新google.maps.LatLng（38.50，-90.50），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
//前往北美的边界
var allowedBounds=new google.maps.LatLngBounds(
新google.maps.LatLng（28.70，-127.50），
新google.maps.LatLng（48.85，-55.90））；
//收听dragend事件
google.maps.event.addListener（映射'dragend'，函数（）{
if（allowedBounds.contains（map.getCenter（））返回；
//超出边界-将地图移回边界内
var c=map.getCenter（），
x=c.lng（），
y=c.lat（），
maxX=allowedBounds.getNorthEast（）.lng（），
maxY=allowedBounds.getNorthEast（）.lat（），
minX=allowedBounds.getSouthWest（）.lng（），
minY=allowedBounds.getSouthWest（）.lat（）；
如果（xmaxX）x=maxX；
如果（ymaxY）y=maxY；
map.setCenter（新的google.maps.LatLng（y，x））；
});
//限制缩放级别
google.maps.event.addListener（映射'zoom_changed'，函数（）{
if（map.getZoom（）


以上示例的屏幕截图。在这种情况下，用户将无法再向南或向远东拖动：
这里是一个很好的扩展，它将通过侦听dragstart事件将地图中心重置为最后一个有效位置
// Limit panning
var lastCenter = map.getCenter();

google.maps.event.addListener(map, 'dragstart', function() {
    lastCenter = map.getCenter();
});

google.maps.event.addListener(map, 'dragend', function() {
    if(allowedBounds.contains(map.getCenter())) return;

    map.setCenter(lastCenter);
});

我想我参加聚会有点晚了，但因为这正是我刚才需要的，而且我在这方面有所改进，所以我想我还是会发布一个答案
有了和的答案，用户仍然可以使用平移控件（如果已激活）离开所需区域。@Yauhen.F在评论中提到的东西
因此，我没有使用dragend事件，而是使用center\u changed事件。在拖动过程中以及每次有人使用平移控件时，都会连续触发该命令
// bounds of the desired area
var allowedBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(70.33956792419954, 178.01171875), 
     new google.maps.LatLng(83.86483689701898, -88.033203125)
);
var lastValidCenter = map.getCenter();

google.maps.event.addListener(map, 'center_changed', function() {
    if (allowedBounds.contains(map.getCenter())) {
        // still within valid bounds, so save the last valid position
        lastValidCenter = map.getCenter();
        return; 
    }

    // not valid anymore => return to last valid position
    map.panTo(lastValidCenter);
});

通过在拖动过程中连续保存最后一个有效位置，移动将在超出边界时停止，而不是在拖动结束后返回。
……在这个问题上也有一些很好的建议。我必须解决的问题是，我希望在页面加载时设置一个边界，而不是手动设置边界和检查中心包容，然后在放大时允许拖动到边缘
所以我在地图加载上设置了一次平移边界。
然后检查贴图是否仍处于最大缩放，如果是，则返回初始中心。
如果放大，我希望平移到初始边界的边缘，而不仅仅是检查是否包含中心，因为这样会将允许的平移扩展到视口的一半
不幸的是，虽然这可以完成任务，并且在缓慢平移时效果很好，但如果您快速平移，则有点不稳定
如果你对如何避免这种情况有什么建议，我将不胜感激
    map = new google.maps.Map( // defaults
        document.getElementById("map22"),
        {
            disableDefaultUI        : true,
            zoomControl             : true,
            zoom                    : 7,
            minZoom                 : 7,
            maxZoom                 : 10,
            center                  : new google.maps.LatLng(
                64.99473104134819,
                -19.22332763671875
            ),
            mapTypeId               : google.maps.MapTypeId.ROADMAP
        }
    );



    function borders(){
        return {
            maxLat : map.getBounds().getNorthEast().lat(),
            maxLng : map.getBounds().getNorthEast().lng(),
            minLat : map.getBounds().getSouthWest().lat(),
            minLng : map.getBounds().getSouthWest().lng(),
            center : map.getCenter()
        }
    }

    google.maps.event.addListenerOnce(map,'idle',function() {
        limit = borders();
    });

    google.maps.event.addListener(map,'drag',function() {
        if(map.getZoom() == 7) return map.setCenter(limit.center);
        current = borders();
        if( current.maxLng < limit.maxLng && current.minLng > limit.minLng ) activeCenterLng = current.center.lng();
        if( current.maxLat < limit.maxLat && current.minLat > limit.minLat ) activeCenterLat = current.center.lat();
        map.setCenter(
            new google.maps.LatLng(
                activeCenterLat,
                activeCenterLng
            )
        );
    });

map=new google.maps.map（//默认值）
document.getElementById（“map22”），
{
disableDefaultUI:true，
动物控制：对，
缩放：7，
minZoom:7，
最大缩放：10，
中心：新google.maps.LatLng(
64.99473104134819,
-19.22332763671875
),
mapTypeId:google.maps.mapTypeId.ROADMAP
}
);
函数边界（）{
返回{
maxLat:map.getBounds（）.getNorthEast（）.lat（），
maxLng:map.getBounds（）.getNorthEast（）.lng（），
minLat:map.getBounds（）.getSouthWest（）.lat（），
minLng:map.getBounds（）.getSouthWest（）.lng（），
中心：map.getCenter（）
}
}
google.maps.event.addListenerOnce（map，'idle'，function（））{
限制=边界（）；
});
google.maps.event.addListener（映射，'drag'，函数（）{
if（map.getZoom（）==7）返回map.setCenter（limit.center）；
当前=边界（）；
如果（current.maxLnglimit.minLng）activeCenterLng=current.center.lng（）；
如果（current.maxLatlimit.minLat）activeCenterLat=current.center.lat（）；
地图设置中心(
新google.maps.LatLng(
activeCenterLat，
activeCenterLng
)
);
});
当我使用拖拽或拖拽或其他方式时，地图会跳回允许的边界，而不是简单地限制溢出的移动。只需将事件更改为“中心更改”，以防止它像那样四处跳跃
修改的JSFIDLE：
编辑：不确定为什么小提琴不会产生堆栈溢出，但它应该产生，因为setCenter将再次更改呼叫中心。。小心点我试过HenningJ的答案，直到地图的中心在b的一个角落，地图才停止平移
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0 }
            #map-canvas { height: 100% }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false"></script>
        </script>
        <script type="text/javascript">
            function initialize() {
                var mapOptions = {
                    center: new google.maps.LatLng(28.70, -127.50),
                    zoom: 4,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map-canvas"),
                        mapOptions);

                // bounds of the desired area
                var allowedBounds = new google.maps.LatLngBounds(
                  new google.maps.LatLng(28.70, -127.50),
                  new google.maps.LatLng(48.85, -55.90)
                );
                var boundLimits = {
                    maxLat : allowedBounds.getNorthEast().lat(),
                    maxLng : allowedBounds.getNorthEast().lng(),
                    minLat : allowedBounds.getSouthWest().lat(),
                    minLng : allowedBounds.getSouthWest().lng()
                };

                var lastValidCenter = map.getCenter();
                var newLat, newLng;
                google.maps.event.addListener(map, 'center_changed', function() {
                    center = map.getCenter();
                    if (allowedBounds.contains(center)) {
                        // still within valid bounds, so save the last valid position
                        lastValidCenter = map.getCenter();
                        return;
                    }
                    newLat = lastValidCenter.lat();
                    newLng = lastValidCenter.lng();
                    if(center.lng() > boundLimits.minLng && center.lng() < boundLimits.maxLng){
                        newLng = center.lng();
                    }
                    if(center.lat() > boundLimits.minLat && center.lat() < boundLimits.maxLat){
                        newLat = center.lat();
                    }
                    map.panTo(new google.maps.LatLng(newLat, newLng));
                });
            }
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="map-canvas"/>
    </body>
</html>

 var latlng = new google.maps.LatLng(18.283078,84.047556);
     var myOptions = {
          zoom: 12,

          center: latlng,
          zoomControl: false,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          scrollwheel: false,
        navigationControl: false,
        mapTypeControl: false,
        scaleControl: false,
        draggable: false,
        disableDoubleClickZoom: true,
        };
        map = new google.maps.Map(document.getElementById("map_canvas"),   myOptions);

var mapObject = plugin_map.gmap3('get');
var allowedBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(41.3957556, -88.4345472), 
     new google.maps.LatLng(49.4010417, -78.4286389)
);
google.maps.event.addListener(mapObject, 'center_changed', function() {
    if (allowedBounds.contains(mapObject.getCenter())) {
        // still within valid bounds, so save the last valid position
        return; 
    }

    // not valid anymore => return to last valid position
     var c = mapObject.getCenter(),
         x = c.lng(),
         y = c.lat(),
         maxX = allowedBounds.getNorthEast().lng(),
         maxY = allowedBounds.getNorthEast().lat(),
         minX = allowedBounds.getSouthWest().lng(),
         minY = allowedBounds.getSouthWest().lat();

     if (x < minX) x = minX;
     if (x > maxX) x = maxX;
     if (y < minY) y = minY;
     if (y > maxY) y = maxY;

     //mapObject.setCenter(new google.maps.LatLng(y, x));
     mapObject.panTo(new google.maps.LatLng(y, x));
});

// bounds of the desired area
var allowedBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(70.33956792419954, 178.01171875), 
     new google.maps.LatLng(83.86483689701898, -88.033203125)
);
var lastValidCenter = map.getCenter();

google.maps.event.addListener(map, 'center_changed', function() {

    var mapBounds = map.getBounds();
    var mapNe = mapBounds.getNorthEast();
    var mapSw = mapBounds.getSouthWest();
    var center = map.getCenter();

    if( allowedBounds.contains(mapNe) && allowedBounds.contains(mapSw) ) {
        //the user is scrolling within the bounds.
        lastValidCenter = center;
        return;
    }

    //the user has scrolled beyond the edge.

    var mapWidth = mapNe.lng() - mapSw.lng();
    var mapHeight = mapNe.lat() - mapSw.lat();

    var x = center.lng();
    var y = center.lat();

    var maxX = allowedBounds.getNorthEast().lng();
    var maxY = allowedBounds.getNorthEast().lat();
    var minX = allowedBounds.getSouthWest().lng();
    var minY = allowedBounds.getSouthWest().lat();

    //shift the min and max dimensions by 1/2 of the screen size, so the bounds remain at the edge of the screen

    maxX -= (mapWidth / 2);
    minX += (mapWidth / 2);

    maxY -= (mapHeight / 2);
    minY += (mapHeight / 2);


    if (x < minX) {
        x = minX;
    }
    if (x > maxX) {
        x = maxX;
    }
    if (y < minY){
        y = minY;
    }
    if (y > maxY){
        y = maxY;
    }

    map.panTo(new google.maps.LatLng(y, x));

});

var lastValidCenter;
var minZoomLevel = 2;

setOutOfBoundsListener();

function setOutOfBoundsListener() {
        google.maps.event.addListener(map, 'dragend', function () {
            checkLatitude(map);
        });
        google.maps.event.addListener(map, 'idle', function () {
            checkLatitude(map);
        });
        google.maps.event.addListener(map, 'zoom_changed', function () {
            checkLatitude(map);
        });
};

function checkLatitude(map) {
    if (this.minZoomLevel) {
        if (map.getZoom() < minZoomLevel) {
            map.setZoom(parseInt(minZoomLevel));
        }
    }

    var bounds = map.getBounds();
    var sLat = map.getBounds().getSouthWest().lat();
    var nLat = map.getBounds().getNorthEast().lat();
    if (sLat < -85 || nLat > 85) {
        //the map has gone beyone the world's max or min latitude - gray areas are visible
        //return to a valid position
        if (this.lastValidCenter) {
            map.setCenter(this.lastValidCenter);
        }
    }
    else {
        this.lastValidCenter = map.getCenter();
    }
}

  <body>
    <div id="map"></div>
    <script>
      var map;
      var NEW_ZEALAND_BOUNDS = {
        north: -34.36,
        south: -47.35,
        west: 166.28,
        east: -175.81,
      };
      var AUCKLAND = {lat: -37.06, lng: 174.58};

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: AUCKLAND,
          restriction: {
            latLngBounds: NEW_ZEALAND_BOUNDS,
            strictBounds: false,
          },
          zoom: 7,
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>

map = new google.maps.Map(document.getElementById('map'), {
    restriction: {
        latLngBounds: {
            north: 85,
            south: -85,
            west: -180,
            east: 180
        },
        strictBounds: true,
    },
   zoom: 7,
   });