百度地图API实战 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

生成filter

这一节我们将介绍实现数据筛选至关重要的生成filter函数

1、filter函数的用处

生成filter,可用于麻点图数据筛选,还可以用来生成url异步获取LBS云数据

2、require对象的构建

我们构建一个require对象,我们用他来保存用户需求,并且加入了获取最大值最小值以及删除数组元素的函数,方便对数据进行操作。

var require = {
    price:[],
    type:[],
    getMax: function () {
        var max = Math.max.apply(null, this.price);
        return max;
    },
    getMin: function(){
        var min = Math.min.apply(null, this.price);
        return min;
    },
    removeEle: function(index,arrName){
        if(index>-1){
            this[arrName].splice(index,1);
        }
    }
};

3、为点击事件加入相应操作

我们为每个checkbox加入data-label属性。

我们使用getAttribute('data-label')获取checkbox的自定义data-label数据,这个数据用来标记数据是价格相关还是酒店类型相关。

每次点击我们都需要更新require中的相应内容,如选择type时,我们将对应的type添加到数组中,当取消选择时我们又将对应的type从数组中移除。

for(var i=0;i<checkbox.length;i++){
    checkbox[i].onclick = function(){
        if(this.checked){
            switch (this. getAttribute('data-label')){
                case 'price':{
                    var price = (this.value).split(',');
                    require.price.push(parseInt(price[0]),parseInt(price[1]));
                    break;
                }
                case 'type':{
                    require.type.push(parseInt(this.value));
                    break;
                }
            }
        }
        else{
            switch (this. getAttribute('data-label')){
                case 'price':{
                    var price = (this.value).split(',');
                    var index = require.price.indexOf(parseInt(price[0]));
                    require.removeEle(index,'price');
                    var index = require.price.indexOf(parseInt(price[1]));
                    require.removeEle(index,'price');
                    break;
                }
                case 'type':{
                    var index  = require.type.indexOf(parseInt(this.value));
                    require.removeEle(index,'type');
                    break;
                }
            }
        }
    }
}

4、生成filter

通过require的内容生成filter,需要注意的是用户没有选择时我们加载所有数据这种情况

function getFilter(require){
    var filter = '';
    if(require.price[0] === 0 || require.price[0]){
        var price = 'price:' + require.getMin() + ',' +require.getMax();
        filter += price;
    }
    console.log(require.type.length);
    var type = require.type.length !==0  ? '|hotel_type:['+ require.type.join(',')+']' :'';
    filter += type;
    return filter;
}
完成点击选择酒店类型时的case部分代码。
require.type.push(parseInt(this.value));