限制地图拖拽范围 超出后返回某个点

var extent = new Object();
  extent.minlng = 116.12476436506583;//左滑限制
  extent.maxlng = 117.35172235235119;//右滑限制
  extent.minlat = 38.38157198603861; //下滑限制
  extent.maxlat = 40.07866287058457; //上滑限制
  map.addEventListener("dragging", function (type, target) {
    console.log(this.getBounds().getSouthWest().lng);
    //下滑不能超过extent.minlat
    if (extent.minlat > this.getBounds().getSouthWest().lat) {
      map.centerAndZoom(new BMap.Point(this.getBounds().getCenter().lng, 38.9157198603861), this.getZoom());
    };
    //上滑不能超过extent.maxlat
    if (extent.maxlat < this.getBounds().getSouthWest().lat) {
      map.centerAndZoom(new BMap.Point(this.getBounds().getCenter().lng, 39.77866287058457), this.getZoom());
    };
    //左滑不能超过extent.minlng
    if (extent.minlng > this.getBounds().getSouthWest().lng) {
      map.centerAndZoom(new BMap.Point(116.92476436506583, this.getBounds().getCenter().lat), this.getZoom());
    };
    //右滑滑不能超过extent.maxlng
    if (extent.maxlng < this.getBounds().getSouthWest().lng) {
      map.centerAndZoom(new BMap.Point(117.34172235235119, this.getBounds().getCenter().lat), this.getZoom());
    };
  });
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的 echarts 地图限制拖动范围的 demo: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts Map Demo</title> <!-- 引入 echarts.js --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <!-- 定义一个容器来渲染 echarts 地图 --> <div id="map" style="width: 100%; height: 500px;"></div> <script> // 初始化 echarts 实例 var myChart = echarts.init(document.getElementById('map')); // 配置 echarts 地图 var option = { // 地图类型 series: [{ type: 'map', mapType: 'china' }] }; // 设置限制拖动范围 myChart.setOption(option); var zoom = myChart.getOption().geo[0].zoom; var centerX = myChart.getOption().geo[0].center[0]; var centerY = myChart.getOption().geo[0].center[1]; var boundLeft = centerX - 20 / zoom; var boundRight = centerX + 20 / zoom; var boundTop = centerY - 10 / zoom; var boundBottom = centerY + 10 / zoom; myChart.setOption({ geo: { center: [centerX, centerY], zoom: zoom, roam: true, scaleLimit: { min: 1, max: 5 }, // 设置限制拖动范围 boundingCoords: [[boundLeft, boundTop], [boundRight, boundBottom]] } }); // 监听 echarts 地图缩放事件 myChart.on('geoRoam', function(params) { var zoom = params.zoom; var centerX = params.center[0]; var centerY = params.center[1]; var boundLeft = centerX - 20 / zoom; var boundRight = centerX + 20 / zoom; var boundTop = centerY - 10 / zoom; var boundBottom = centerY + 10 / zoom; myChart.setOption({ geo: { center: [centerX, centerY], zoom: zoom, roam: true, scaleLimit: { min: 1, max: 5 }, // 更新限制拖动范围 boundingCoords: [[boundLeft, boundTop], [boundRight, boundBottom]] } }); }); // 渲染 echarts 地图 myChart.setOption(option); </script> </body> </html> ``` 这个 demo 展示了如何使用 echarts 的 `boundingCoords` 属性来限制地图的拖动范围,在缩放地图时动态更新限制范围。具体实现方法可以参考代码注释。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值