百度地图web api 输入关键字提示仅仅给了一个很简单的demo,而且并未提供任何条件限制的api,今天遇到了个比较难受的问题是,网站本身是省市级3级区域选择,然后后面输入详细地址后要在百度地图上显示位置,就是如图所示的情况
很显然,我要在选择省市级后输入准确地址,比如我选择北京市东城区了,我要在东城区里面找成都饭店。。。你一输成都,这个智能提示会在全国范围内搜索,而且事件是自动注册在
var ac = new BMap.Autocomplete( //建立一个自动完成的对象
{
"input": "addr2",
"location": map
});
这个位置的,就是通过input,百度的js对addr2这个input注册监听事件,所以根本是没法改变条件的,唯一的办法就是拦截
百度api这个地方做得还比较明智,就是无论你是通过键盘输入还是js输入,都是触发智能提示的事件,那我就通过一个input(addr),把addr2中的val改为 省市区+addr,监听addr的onkeyup事件,onkeydown和百度地图的监听有冲突,把addr2 的位置用addr给覆盖掉,不能display:none,必须占位,不然百度的提示框位置会有问题。并且在选择智能提示后,详细地址不显示省市区的文字,如下的js里也有控制,具体如下:
<input type="inputText" tabindex="7" id="addr2" name="addr2" placeholder="请输入具体的地址" style="width: 277px;visibility: hidden"/>
<input type="inputText" tabindex="7" id="addr" name="addr" placeholder="请输入具体的地址" style="width: 277px;z-index: 1;margin-left: -282px;" οnkeyup="mysearch(this)"/>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=EZPCgQ6zGu6hZSmXlRrUMTpr"></script>
@* <div id="r-result">请输入<input type="text" id="suggestId" value="百度" style="width: 400px;"/>*@
@* </div>*@
<div id="searchResultPanel" style="border: 1px solid #C0C0C0; width: 400px; height: auto; display: none;"></div>
<div id="l-map"></div>
<script type="text/javascript">
function mysearch(e) {
if ($('#province3').val() == '') {
layer.alert('请先选择省市区');
$('#addr').val('');
$('#addr2').val('');
}
$('#addr2').val($('#province3').val() + $('#city3').val() + $('#area3').val() + $(e).val());
}
// 百度地图API功能
function G(id) {
return document.getElementById(id);
}
var map = new BMap.Map("l-map");
map.centerAndZoom("北京", 12); // 初始化地图,设置城市和地图级别。
var ac = new BMap.Autocomplete( //建立一个自动完成的对象
{
"input": "addr2",
"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;
G("searchResultPanel").innerHTML = str;
});
var myValue;
ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
var _value = e.item.value;
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
setPlace();
$('#addr').val(_value.street + _value.business);
});
function setPlace() {
map.clearOverlays(); //清除地图上所有覆盖物
function myFun() {
var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
map.centerAndZoom(pp, 18);
map.addOverlay(new BMap.Marker(pp)); //添加标注
}
var local = new BMap.LocalSearch(map, {
//智能搜索
onSearchComplete: myFun
});
local.search(myValue);
}
</script>
上张改后的图: