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

本文主要是介绍漏刻有时百度地图API实战开发(5)区域限制移动端鬼畜抖动的解决方案，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

漏刻有时百度地图API实战开发(1)华为手机无法使用addEventListener click 的兼容解决方案
漏刻有时百度地图API实战开发(2)文本标签显示和隐藏的切换开关
漏刻有时百度地图API实战开发(3)自动获取地图多边形中心点坐标
漏刻有时百度地图API实战开发(4)显示指定区域在移动端异常的解决方案
漏刻有时百度地图API实战开发(5)区域限制移动端鬼畜抖动的解决方案
漏刻有时百度地图API实战开发(6)多个标注覆盖层级导致不能响应点击的问题
漏刻有时百度地图API实战开发(7)JavaScript开源库几何运算判断点是否在多边形内（电子围栏）
漏刻有时百度地图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>