百度地图（15）-自动完成

1. 百度地图提供了关键字搜索功能，它是基于自动完成和本地搜索来完成的，先使用

BMap.Autocomplete 进行关键字自动完成，然后根据结果内容使用 BMap.LocalSearch 进行定位。

 

2. 代码

AutoComplete 中的 input 是输入框的ID，location 则指向当前地图对象。

onhighlight 是指鼠标或者键盘移动，移到某条记录高亮时触发的事件。

onconfirm 是指选择某条记录时触发的事件。确定后，在地图中标记当前选择记录的位置。setPlace 

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;
  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();
});

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);
}

 

3. 页面显示

 

 

 

 

 

 

4. 参考代码

https://github.com/WhatGIS/bdMap