欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

百度地图api 热力图上 清空指定区的覆盖物(轮廓)的另一思路

程序员文章站 2022-06-10 16:34:02
...

1.最近公司的新需求:就是点击一个地区就把对应地区轮廓画出来,但是点另一个地区时,之前的地区轮廓还在,而我要的效果就是只显示一个;

于是再网上查找,使用覆盖物清除方法时就会把所有的覆盖物都清掉了,也把热力图清掉了,这明显不是我想要的。


2.盯了一天的地图api。那个画轮廓类有个隐藏(hide)和显示(show)方法能够实现我需要的功能;


3.初始化时

var arrPly = []; //全局变量,存放轮廓对象  
function setPolyline() {
    var bdary = new BMap.Boundary();
    var arrDistrict = ["天河区", "白云区", "荔湾区"]; //添加所有你用到的地区  
    arrPly = []; //清空数组,避免第二次加载该方法时导致轮廓对象重复  
    $.each(arrDistrict, function(index, item) {
        bdary.get(item, function(result) {
            if (result.boundaries.length === 0) {
                console.log('未能获取当前输入行政区域:' + item);
                return;
            }
            var ply = new BMap.Polyline(result.boundaries[0], {
                strokeWeight: 3,
                strokeColor: "#0191fa"
            });
            arrPly.push({
                name: item,
                value: ply
            });
            ply.hide(); //先把全部地区隐藏
            map.addOverlay(ply);
        });
    });
}


4.设置自定义地区

function showBoundariy(curDistrict) {
    for (var i = 0; i < arrPly.length; i++) {
        if (arrPly[i].name == curDistrict) {
            arrPly[i].value.show();
            map.setViewport(arrPly[i].value.getPath()); //调整视野
        } else {
            arrPly[i].value.hide();//非当前地区设为隐藏
        }
    }
}

总结:这个方法虽然不是高大尚,但解决了问题!

注意:each是异步的,可能会出现轮廓对象未初始化完成时你就调用 showBoundariy 方法会报错,要等初始化完成。