百度地图限制拖放.超出设定边界后,返回到初始点位

前提:手机app手绘地图拖放区域限制.超出设定区域后,返回到初始点位.

网上看到的大部分文章都是这样式的.因为需要使用AreaRestriction_min.js这个js文件,如果特意搜索这个js文件,发现很多博主都将此js文件设置为付费下载.其实不需要付费也可以直接使用.只需要在html页面引用js文件.如下代码所示

<script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>

但用方式1,引用外部js文件限制地图拖放界限有问题.如果将左下角和右上角的经纬度,定位到屏幕可视范围以外(如下图),内部计算的逻辑会导致地图不停抖动,F12看源代码,发现css样式在一个值的范围内来回跳.导致的地图不停抖动.

后排除这种方式.发现拖动事件有三种,开始拖动,拖动中,拖动完三个事件.结合上图中的解决方法. 自己用另一种方式实现了限制地图拖放.

实现代码

解决思想和画的草图一样, 先获取屏幕范围以外的左下角和右上角,然后通过setBounds设置地图范围,添加地图监听事件.监听停止拖拽时的事件.在逻辑中判断是否超出限定的界限.如下代码所示

// map.addEventListener("click", function(e) {
// 	console.log("鼠标单击地方的经纬度为：", e.point.lng + "," + e.point.lat);
// });
var b = new BMap.Bounds(new BMap.Point(113.98185653036975,36.21310759299939), new BMap.Point(114.43661471174099,36.76509731248471)); // 范围 左下角，右上角的点位置 
map.addEventListener("dragend", function(type, target) {
	if (b.containsBounds(map.getBounds())) {
		return;
	}else{
		map.panTo(new BMap.Point(114.18882611986866,36.475437590543926), 4);
	}
});

监听事件api截图

 设定地图范围后的判断api截图(省略了第一张图中判断经纬度的逻辑.        )

 变更中心点的api截图

好啦,相信读到这里,限制地图拖放范围的功能已经成功了.并且根本不需要引用 AreaRestriction_min.js这个js文件.