限制百度地图拖动范围限制,当超如范围时自动返回

限制百度地图拖动范围限制,当超如范围时自动返回

背景
最近利用百度离线地图加载世界地图,但发现下载的区域只是世界地图一块,当拖动地图范围超过想要的范围时,就会出现背景块为白色;
如图这里写图片描述

解决思路1:百度api开发小案例中给出的方案

<script type="text/javascript">  
  layer.msg('将地图显示范围设定在指定区域,地图拖出该区域后会重新弹回');

//百度地图API功能 
    var map = new BMap.Map("map_demo");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 8);
    map.enableScrollWheelZoom();
    var b = new BMap.Bounds(new BMap.Point(116.027143, 39.772348),new BMap.Point(116.832025, 40.126349));
    try {   
        BMapLib.AreaRestriction.setBounds(map, b);
    } catch (e) {
        alert(e);
    }
</script>

问题:这种在拖动中依然可以移除范围,看到边界外白色区域。
解决思路2:根据地图拖动事件,判断地图拖动的范围和中心点,当地图可视范围超过切片范围时,重新定位中心点和层级,保证在范围内的边界。

var extent=new Object();
 extent.minX="-180.380133";
 extent.maxX="177.557674";
 extent.minY="-80.395352";
 extent.maxY="86"; 
   map.addEventListener("dragging",function(type, target){
                if(extent.minY>this.getBounds().getSouthWest().lat){
                    if(type.currentTarget.ef.lat<-61.888492){
                        centerAndZoom(this.getBounds().getCenter().lng,-85.2670845,this.getZoom());
                    }
                };
                if(extent.maxY>this.getBounds().getNorthEast().lat){
                    if(type.currentTarget.ef.lat>78.437445){
                        centerAndZoom(this.getBounds().getCenter().lng,85.2670845,this.getZoom());
                    }
                }
            });

通过不断计算和测试中心点确保地图查看全球地图都是在切片范围内的。

  • 1
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
以下是一个简单的 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` 属性来限制地图拖动范围,在缩放地图动态更新限制范围。具体实现方法可以参考代码注释。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值