javascript：layui实现定位、查询数据以及select筛选的组合功能
项目说明
- layui前端UI，实现三个select筛选；
- 百度实时定位实现经纬度的获取和地址获取；
- 关键词搜索；
解决方案
关键词搜索
$("#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 += ""
+ "" + newData[i].poi_category + " " + newData[i].poi_type + ""
+ ""
+ ""
+ " ![](\""</span)
+ newData[i].poi_img + "\" alt=\"\">"
+ ""
+ "" + newData[i].poi_name + ""
+ "" + limitWords(newData[i].poi_content, 50) + ""
+ " " + newData[i].poi_address + ""
+ " " + newData[i].poi_telephone + ""
+ ""
+ ""
+ ""
+ " " + newData[i].poi_distance + "km + newData[i].poi_lat + "," + newData[i].poi_lng + "&coord_type=bd09ll&output=html&src=lockdatav\">导航到这里" +
" + newData[i].poi_url + "\"> 详情链接 " +
""
}
$("#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