在百度地图中进行关键词输入检索时:
- 在地图页面顶部的搜索框中输入关键词。
- 点击搜索按钮或按下回车键进行搜索。
- 地图将显示与关键词相关的地点、商家、景点等信息。
- 可以使用筛选和排序功能来缩小搜索范围或更改搜索结果的排序方式。
- 点击搜索结果中的地点或商家,可以查看详细信息、位置、联系方式等。
- 还可以使用高级搜索功能来设置更多的搜索条件,如距离、评分、价格等。
具体的操作如下:
构建HTML容器
<!--快速搜索-->
<div class="layui-card">
<form class="layui-form layui-form-pane">
<div class="layui-form-item" id="r-result">
<label class="layui-form-label">地址查询 <span class="x-red">*</span></label>
<div class="layui-input-block">
<input type="text" placeholder="输入关键词" id="suggestId" class="layui-input" style="width: 100%;"/>
</div>
</div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
</form>
</div>
获取下拉列表
var ac = new BMap.Autocomplete(
{
"input": "suggestId"
, "location": map
});
ac.addEventListener("onhighlight", function (e) { //鼠标放在下拉列表上的事件
var str = "";
var _value = e.fromitem.value;
var value = "";
if (e.fromitem.index > -1) {
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
value = "";
if (e.toitem.index > -1) {
_value = e.toitem.value;
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
$("#searchResultPanel").val(str);
});
监听地图获取坐标和地址
var myValue;
ac.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件
var _value = e.item.value;
console.log(_value)
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
$("#searchResultPanel").val("onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue);
$("#poi_province").val(_value.province)
$("#poi_city").val(_value.city)
$("#poi_area").val(_value.district)
$("#poi_address").val(_value.street + _value.business);
setPlace();
});
//设置中心的
function setPlace() {
map.clearOverlays();
function myFun() {
var pp = local.getResults().getPoi(0).point;//获取第一个智能搜索的结果
//console.log(pp);
$("#lnglat").val(pp.lng + ',' + pp.lat);
map.centerAndZoom(pp, 18);
map.addOverlay(new BMap.Marker(pp)); //添加标注
}
var local = new BMap.LocalSearch(map, { //智能搜索
onSearchComplete: myFun
});
local.search(myValue);
}
@漏刻有时