百度地图(15)-自动完成

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

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

2. 代码

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

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

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

 1 var ac = new BMap.Autocomplete({
 2   "input":"suggestId"
 3   ,"location":map
 4 })
 5 
 6 ac.addEventListener('onhighlight',function (e) {
 7   var str = "";
 8   var _value = e.fromitem.value;
 9   var value = "";
10   if(e.fromitem.index > -1){
11     value = _value.province + _value.city + _value.district + _value.street + _value.business;
12   }
13   str = "FromItem<br />index=" + e.fromitem.index + "<br />value=" + value;
14   value = "";
15   if(e.toitem.index > -1){
16     _value = e.toitem.value;
17     value = _value.province + _value.city + _value.district + _value.street + _value.business;
18   }
19 
20   str += "<br />ToItem<br />index=" + e.toitem.index + "<br />value = " + value;
21   G("searchResultPanel").innerHTML = str;
22 
23 });
24 
25 var myValue ;
26 ac.addEventListener("onconfirm",function (e){
27   var _value = e.item.value;
28   myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
29   G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue" + myValue;
30   setPlace();
31 });
32 
33 function setPlace(){
34   map.clearOverlays();
35   function myFun() {
36     var pp = local.getResults().getPoi(0).point;
37     map.centerAndZoom(pp,18);
38     map.addOverlay(new BMap.Marker(pp));
39   }
40   var local = new BMap.LocalSearch(map,{
41     onSearchComplete:myFun
42   });
43   local.search(myValue);
44 }

3. 页面显示

 

 

4. 参考代码

https://github.com/WhatGIS/bdMap

 
原文地址:https://www.cnblogs.com/googlegis/p/14685583.html