百度地图浏览区域限制类，对外开放。 允许开发者输入限定浏览的地图区域的Bounds值， 则地图浏览者只能在限定区域内浏览地图。

一、百度区域限制计算JS库-PC端

区域限制计算JS库

    <!--百度地图核心库--><script type="text/javascript" src="//api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>

设置可视视野范围

  //设置可视视野范围var b = new BMap.Bounds(new BMap.Point(121.2790142755745, 29.675582699353967),//左上new BMap.Point(121.83093318072264, 29.945334949391032)//右下);
try {BMapLib.AreaRestriction.setBounds(map, b); // 以map为中心，已b为范围的地图} catch (e) {console.log(e);}

在PC端以上的解决方案，很完美。但是在移动端，就会出现上图的鬼畜抖动。

二、移动端的避开指南

1.设置响应式CSS - 失败

#lock_map {float: left;width: 100%;height: 100%;overflow: hidden;margin: 0;padding: 0;transform: translate(0, 0);-webkit-transform: translate(0, 0); /* Safari */-moz-transform: translate(0, 0); /* Firefox */-ms-transform: translate(0, 0); /* IE */-o-transform: translate(0, 0); /* Opera */
}

见《移动端响应式设计中出现 “抖动” 现象如何解决？》

2.超出编辑，回弹自中心点

这个操作有点不知如何评价，边缘的标注就不看了？还是要小心翼翼的拖动，体验性也是极差。

map.addEventListener("dragend", function (type, target) {//console.log(b.containsBounds(map.getBounds()));if (b.containsBounds(map.getBounds())) {//map.panTo(new BMap.Point(114.18882611986866, 36.475437590543926), 4);} else {map.centerAndZoom(pointCenter, 11);}});

三、不完美的方案

不完美但是能用，修改AreaRestriction_min.js在移动端中心点的计算方式。

1.原文件算法

 /*** 需要绑定在地图移动事件中的操作，主要控制出界时的地图重新定位* @param {Event} e e对象** @return 无返回值*/AreaRestriction._mapMoveendEvent = function(e) {// 如果当前完全没有出界，则无操作if (_bounds.containsBounds(_map.getBounds())) {return;}// 两个需要对比的bound区域的边界值var curBounds = _map.getBounds(),curBoundsSW = curBounds.getSouthWest(),curBoundsNE = curBounds.getNorthEast(),_boundsSW = _bounds.getSouthWest(),_boundsNE = _bounds.getNorthEast();// 需要计算定位中心点的四个边界var boundary = {n : 0, e : 0, s : 0, w : 0};// 计算需要定位的中心点的上方边界boundary.n = (curBoundsNE.lat < _boundsNE.lat) ? curBoundsNE.lat :_boundsNE.lat;// 计算需要定位的中心点的右边边界boundary.e = (curBoundsNE.lng < _boundsNE.lng) ? curBoundsNE.lng :_boundsNE.lng;// 计算需要定位的中心点的下方边界boundary.s = (curBoundsSW.lat < _boundsSW.lat) ? _boundsSW.lat :curBoundsSW.lat;// 计算需要定位的中心点的左边边界boundary.w = (curBoundsSW.lng < _boundsSW.lng) ? _boundsSW.lng :curBoundsSW.lng;// 设置新的中心点var center = new BMap.Point(boundary.w + (boundary.e - boundary.w) / 2,boundary.s + (boundary.n - boundary.s) / 2);setTimeout(function() {_map.panTo(center, {noAnimation : "no"});}, 1);};

2.优化算法

 /*** 需要绑定在地图移动事件中的操作，主要控制出界时的地图重新定位* @param {Event} e e对象** @return 无返回值*/AreaRestriction._mapMoveendEvent = function (e) {// 如果当前完全没有出界，则无操作if (_bounds.containsPoint(_map.getCenter())) {return;}// 两个需要对比的bound区域的边界值var curBounds = _map.getCenter(),_boundsSW = _bounds.getSouthWest(),_boundsNE = _bounds.getNorthEast(),nextBounds = curBounds;if (curBounds.lng >= _boundsNE.lng)nextBounds.lng = _boundsNE.lng;else if (curBounds.lng <= _boundsSW.lng)nextBounds.lng = _boundsSW.lng;if (curBounds.lat >= _boundsNE.lat)nextBounds.lat = _boundsNE.lat;else if (curBounds.lat <= _boundsSW.lat)nextBounds.lat = _boundsSW.lat;//console.log(nextBounds);// 设置新的中心点setTimeout(function () {_map.panTo(nextBounds, {noAnimation: "no"});}, 1);};

四、完美的方案

使用百度地图webgl版本开发和区域限制。

    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=3HGqGo1***"></script><script type="text/javascript"src="//mapopen.cdn.bcebos.com/github/BMapGLLib/AreaRestriction/src/AreaRestriction.min.js"></script>

@漏刻有时