javascript：layui实现定位、查询数据以及select筛选的组合功能

项目说明

1. layui前端UI，实现三个select筛选；
2. 百度实时定位实现经纬度的获取和地址获取；
3. 关键词搜索；

解决方案 关键词搜索

        $("#search_btn").click(function () {
            var keys = $("#keys").val();
            var lnglat = $("#lnglat").val();
            //筛选数据;
            getLocalData(lnglat, keys, "", "", "");
        })

自动定位

//自动定位;
        function bdGeo() {
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function (r) {
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                    //console.log(r.address);
                    $("#local").html("当前位置：" + r.address.province + r.address.city + r.address.district + r.address.street);
                    $("#lnglat").val(r.point.lng + "," + r.point.lat);
                    //获取列表;
                    getLocalData(r.point.lng + "," + r.point.lat, "", "", "", "");
                } else {
                    alert('failed' + this.getStatus());
                }
            }, function (error) {
                console.log(error);
            }, {
                enableHighAccuracy: true,
                timeout: 1000,
                maximumAge: 0
            });
        }

select筛选数据 layui Html

三组select筛选关键代码： lay-filter="mixSelect"

  
            
                
                    
                        --医院级别--
                        三级特等
                        三级甲等
                        三级乙等
                        三级丙等
                        二级甲等
                        二级乙等
                        二级丙等
                        一级甲等
                        一级乙等
                        一级丙等
                    
                
                
                    
                        --医院性质--
                        公立
                        私立
                    
                
                
                    
                        --附近--
                        1千米内
                        3千米内
                        5千米内
                        10千米内
                    
                
            
        

layui获取数据

    layui.use(['form'], function () {
        $ = layui.jquery;
        var form = layui.form;

        form.on('select(mixSelect)', function (data) {
            var poi_category = $("#poi_category").val();
            var poi_type = $("#poi_type").val();
            var poi_distance = parseInt($("#poi_distance").val());
            if (!poi_distance) {
                poi_distance = listDistance / 1000
            }
            console.log(poi_distance);
            var keys = $("#keys").val();
            var lnglat = $("#lnglat").val();
            //筛选数据;
            getLocalData(lnglat, keys, poi_category, poi_type, poi_distance)
        });
    });

查询和筛选数据

    /*加载附近数据*/
    function getLocalData(lnglat, keys, poi_category, poi_type, poi_distance) {
        $.ajax({
            url: 'api/api.php?act=getDistance&token=3cab7ce4142608c0f40c785b5ab5ca24',
            async: true,
            type: 'get',
            data: {
                lnglat: lnglat,
                keys: keys
            },
            dataType: "json",
            success: function (res) {
                //console.log(res.data);
                /*过滤数据*/
                var newData = [];
                if (poi_category || poi_type || poi_distance) {
                    newData = filterData(res.data, poi_category, poi_type, poi_distance);
                } else {
                    newData = res.data;
                }
                var listHtml = '';
                for (var i = 0; i  o.poi_category.toString().includes(poi_category),
        o => o.poi_type.toString().includes(poi_type),
        o => o.poi_distance  filters.every(fn => fn(o)));
    return result;
}

@lockdata.cn