Javascript 谷歌地图v3-限制可视区域和缩放级别

是否有可能将Google map v3限制在某个特定区域？我希望只允许显示某些区域（例如国家），不允许用户在其他地方滑动。我还想限制缩放级别-例如，仅在级别6和9之间。我想使用所有的底图类型

有没有办法做到这一点

通过使用StyledMap，我在限制缩放级别方面取得了部分成功，但我仅在限制路线图方面取得了成功，我无法以这种方式限制其他基本类型的缩放

---

感谢您的帮助

您可以收听

dragend

事件，如果地图被拖动到允许的边界之外，请将其移回内部。您可以在对象中定义允许的边界，然后使用

contains（）

方法检查新的lat/lng中心是否在边界内

您还可以非常轻松地限制缩放级别

考虑以下示例：

谷歌地图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 strictBounds=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（strictBounds.contains（map.getCenter（））返回；
//我们超出边界-将地图移回边界内
var c=map.getCenter（），
x=c.lng（），
y=c.lat（），
maxX=strictBounds.getNorthEast（）.lng（），
maxY=strictBounds.getNorthEast（）.lat（），
minX=strictBounds.getSouthWest（）.lng（），
minY=strictBounds.getsoutwest（）.lat（）；
如果（xmaxX）x=maxX；
如果（ymaxY）y=maxY；
map.setCenter（新的google.maps.LatLng（y，x））；
});
//限制缩放级别
google.maps.event.addListener（映射'zoom_changed'，函数（）{
if（map.getZoom（）

以上示例的屏幕截图。在这种情况下，用户将无法再向南或向远东拖动：

---

限制缩放级别的更好方法可能是使用

minZoom

/

maxZoom

选项，而不是对事件做出反应

var opt = { minZoom: 6, maxZoom: 9 };
map.setOptions(opt);

也可以在地图初始化期间指定选项，例如：

var map = new google.maps.Map(document.getElementById('map-canvas'), opt);

---

请参阅：

限制范围的更好方法。。。使用包含上述海报中的逻辑

var dragStartCenter;

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

google.maps.event.addListener(this.googleMap, 'dragend', function(){
                            if (mapBounds.contains(map.getCenter())) return;
                    map.setCenter(this.dragStart);
                           });

---

这是我的变体，用于解决可视区域的限制问题

        google.maps.event.addListener(this.map, 'idle', function() {
            var minLat = strictBounds.getSouthWest().lat();
            var minLon = strictBounds.getSouthWest().lng();
            var maxLat = strictBounds.getNorthEast().lat();
            var maxLon = strictBounds.getNorthEast().lng();
            var cBounds  = self.map.getBounds();
            var cMinLat = cBounds.getSouthWest().lat();
            var cMinLon = cBounds.getSouthWest().lng();
            var cMaxLat = cBounds.getNorthEast().lat();
            var cMaxLon = cBounds.getNorthEast().lng();
            var centerLat = self.map.getCenter().lat();
            var centerLon = self.map.getCenter().lng();

            if((cMaxLat - cMinLat > maxLat - minLat) || (cMaxLon - cMinLon > maxLon - minLon))
            {   //We can't position the canvas to strict borders with a current zoom level
                self.map.setZoomLevel(self.map.getZoomLevel()+1);
                return;
            }
            if(cMinLat < minLat)
                var newCenterLat = minLat + ((cMaxLat-cMinLat) / 2);
            else if(cMaxLat > maxLat)
                var newCenterLat = maxLat - ((cMaxLat-cMinLat) / 2);
            else
                var newCenterLat = centerLat;
            if(cMinLon < minLon)
                var newCenterLon = minLon + ((cMaxLon-cMinLon) / 2);
            else if(cMaxLon > maxLon)
                var newCenterLon = maxLon - ((cMaxLon-cMinLon) / 2);
            else
                var newCenterLon = centerLon;

            if(newCenterLat != centerLat || newCenterLon != centerLon)
                self.map.setCenter(new google.maps.LatLng(newCenterLat, newCenterLon));
        });

google.maps.event.addListener（this.map'idle'，function（）{
var minLat=strictBounds.getSouthWest（）.lat（）；
var minLon=strictBounds.getsoutwest（）.lng（）；
var maxLat=strictBounds.getNorthEast（）.lat（）；
var maxLon=strictBounds.getNorthEast（）.lng（）；
var cBounds=self.map.getBounds（）；
var cMinLat=cBounds.getsoutwest（）.lat（）；
var cMinLon=cBounds.getsoutwest（）.lng（）；
var cMaxLat=cBounds.getNorthEast（）.lat（）；
var cMaxLon=cBounds.getNorthEast（）.lng（）；
var centerLat=self.map.getCenter（）.lat（）；
var centerLon=self.map.getCenter（）.lng（）；
if（（cMaxLat-cMinLat>maxLat-minLat）| |（cMaxLon-cMinLon>maxLon-minLon））
{//我们无法使用当前的缩放级别将画布定位为严格的边框
self.map.setZoomLevel（self.map.getZoomLevel（）+1）；
返回；
}
如果（cMinLatmaxLat）
var newCenterLat=maxLat-（（cMaxLat cMinLat）/2）；
其他的
var newCenterLat=centerLat；
if（cMinLonmaxLon）
var newCenterLon=maxLon-（（cMaxLon-cMinLon）/2）；
其他的
var newCenterLon=centerLon；
if（newCenterLat！=centerLat | | newCenterLon！=centerLon）
self.map.setCenter（新的google.maps.LatLng（newCenterLat，newCenterLon））；
});

strictBounds

是新的google.maps.LatLngBounds（）类型的对象

self.gmap

存储谷歌地图对象（

new Google.maps.Map（）

）

它确实有效，但如果你的边界覆盖了痔疮的话，别忘了考虑穿过第0经线和平行线的痔疮。

if (strictBounds.contains(map.getCenter())) return;

不适合我（可能是南半球的问题）。我不得不把它改成：

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

        if(x < minX || x > maxX || y < minY || y > maxY) {
            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));
        }
    }

函数checkBounds（）{
var c=map.getCenter（），
x=c.lng（），
y=c.lat（），
maxX=strictBounds.getNorthEast（）.lng（），
maxY=strictBounds.getNorthEast（）.lat（），
minX=strictBounds.getSouthWest（）.lng（），
minY=strictBounds.getsoutwest（）.lat（）；
if（xmaxX|ymaxY）{
如果（xmaxX）x=maxX；
如果（ymaxY）y=maxY；
map.setCenter（新的google.maps.LatLng（y，x））；
}
}

希望它能帮助别人。

这可能会有帮助

  var myOptions = {
      center: new google.maps.LatLng($lat,$lang),
      zoom: 7,
      disableDefaultUI: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

---

缩放级别可以根据需要定制。

如果您知道具体的lat/lng，则有一种解决方案类似

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

    map.setCenter(new google.maps.LatLng(latitude, longitude));
    map.setZoom(8);

});

如果没有具体的lat/lng

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

    map.setCenter(map.getCenter());
    map.setZoom(8);

});

或

限制v.3+上的缩放。 在地图设置中，添加默认缩放级别和最小缩放或最大缩放

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

    map.setCenter(map.getCenter());
    map.setZoom(8);

});

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

    var bounds = new google.maps.LatLngBounds();
    map.setCenter(bounds.getCenter());
    map.setZoom(8);

});

function initialize() {
   var mapOptions = {
      maxZoom:17,
      minZoom:15,
      zoom:15,
      ....

    var MapBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(35.676263, 13.949096),
    new google.maps.LatLng(36.204391, 14.89038));

    google.maps.event.addListener(GoogleMap, 'dragend', function ()
    {
        if (MapBounds.contains(GoogleMap.getCenter()))
        {
            return;
        }
        else
        {
            GoogleMap.setCenter(new google.maps.LatLng(35.920242, 14.428825));
        }
    });

myOptions = {
        center: myLatlng,
        minZoom: 6,
        maxZoom: 9,
        styles: customStyles,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };