漏刻有时百度地图API实战开发(5)区域限制移动端鬼畜抖动的解决方案

1. 漏刻有时百度地图API实战开发(1)华为手机无法使用addEventListener click 的兼容解决方案
2. 漏刻有时百度地图API实战开发(2)文本标签显示和隐藏的切换开关
3. 漏刻有时百度地图API实战开发(3)自动获取地图多边形中心点坐标
4. 漏刻有时百度地图API实战开发(4)显示指定区域在移动端异常的解决方案
5. 漏刻有时百度地图API实战开发(5)区域限制移动端鬼畜抖动的解决方案
6. 漏刻有时百度地图API实战开发(6)多个标注覆盖层级导致不能响应点击的问题
7. 漏刻有时百度地图API实战开发(7)JavaScript开源库几何运算判断点是否在多边形内（电子围栏）
8. 漏刻有时百度地图API实战开发(8)圆形区域周边搜索地图监听事件(覆盖物重叠显示层级\图像标注监听事件、setZIndex和setTop方法)
   
   百度地图浏览区域限制类，对外开放。 允许开发者输入限定浏览的地图区域的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>

---

@漏刻有时