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"

  <div class="weui-panel__bd">
            <form class="layui-form">
                <div class="layui-inline" style="width: 32%;margin-left: 1%;">
                    <select name="poi_category" id="poi_category" lay-filter="mixSelect">
                        <option value="">--医院级别--</option>
                        <option value="三级特等">三级特等</option>
                        <option value="三级甲等">三级甲等</option>
                        <option value="三级乙等">三级乙等</option>
                        <option value="三级丙等">三级丙等</option>
                        <option value="二级甲等">二级甲等</option>
                        <option value="二级乙等">二级乙等</option>
                        <option value="二级丙等">二级丙等</option>
                        <option value="一级甲等">一级甲等</option>
                        <option value="一级乙等">一级乙等</option>
                        <option value="一级丙等">一级丙等</option>
                    </select>
                </div>
                <div class="layui-inline" style="width: 32%;">
                    <select name="poi_type" id="poi_type" lay-filter="mixSelect">
                        <option value="">--医院性质--</option>
                        <option value="公立">公立</option>
                        <option value="私立">私立</option>
                    </select>
                </div>
                <div class="layui-inline" style="width: 32%;">
                    <select name="poi_distance" id="poi_distance" lay-filter="mixSelect">
                        <option value="">--附近--</option>
                        <option value="1">1千米内</option>
                        <option value="3">3千米内</option>
                        <option value="5">5千米内</option>
                        <option value="10">10千米内</option>
                    </select>
                </div>
            </form>
        </div>

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 < newData.length; i++) {
                    listHtml += "<div class=\"weui-panel weui-panel_access\">"
                        + "<div class=\"weui-panel__hd\">" + newData[i].poi_category + "  " + newData[i].poi_type + "</span></div>"
                        + "<div class=\"weui-panel__bd\">"
                        + "<a href=\"javascript:\" class=\"weui-media-box weui-media-box_appmsg\">"
                        + " <div class=\"weui-media-box__hd\"><img class=\"weui-media-box__thumb\" src=\"" + newData[i].poi_img + "\" alt=\"\"></div>"
                        + "<div class=\"weui-media-box__bd\">"
                        + "<div class=\"weui-media-box__title hosTitle\">" + newData[i].poi_name + "</div>"
                        + "<div class=\"weui-media-box__desc\">" + limitWords(newData[i].poi_content, 50) + "</div>"
                        + "<div class=\"weui-media-box__desc2 layui-icon layui-icon-location\"> " + newData[i].poi_address + "</div>"
                        + "<div class=\"weui-media-box__desc2 layui-icon layui-icon-cellphone\"> " + newData[i].poi_telephone + "</div>"
                        + "</div></a>"
                        + "<div class=\"weui-media-box weui-media-box_text\">"
                        + "<ul style=\"padding-bottom:10px;float: right;\">"
                        + "<li class=\"weui-media-box__info__meta layui-icon layui-icon-find-fill\" style=\"font-size: 13px;\"> " + newData[i].poi_distance + "km <a href=\"//api.map.baidu.com/geocoder?location=" + newData[i].poi_lat + "," + newData[i].poi_lng + "&coord_type=bd09ll&output=html&src=lockdatav\">导航到这里</a></li>" +
                        "<a href=\"" + newData[i].poi_url + "\"><li class=\"weui-media-box__info__meta weui-media-box__info__meta_extra layui-icon layui-icon-link\" style=\"font-size: 13px;\"> 详情链接</li></a>" +
                        "</ul></div></div></div>"
                }
                $("#infoList").html(listHtml);
            },
            error: function (err) {
                console.log(err + "请求数据失败!");
            }
        });
    }

JSON数据过滤

/*数据筛选
* data, 过滤数组
* poi_category, 等级
* poi_type, 性质
* poi_distance,距离
* */
function filterData(data, poi_category, poi_type, poi_distance) {
    //console.log(typeof(poi_distance));
    var filters = [
        o => o.poi_category.toString().includes(poi_category),
        o => o.poi_type.toString().includes(poi_type),
        o => o.poi_distance < poi_distance
    ];

    var result = data.filter(o => filters.every(fn => fn(o)));
    return result;
}

@lockdata.cn