百度地图－非常实用的搜索自定义

这几天做了个关于百度地图的小项目，之前用的google地图，百度地图的api有些地方设计的还是比较诡异的，在这里说一下其中的两个小地方。

第一个是使用LocalSearch时，要获取显示在地图上的所有Marker，百度地图提供了这样一个函数

这个函数在所有Marker被添加后调用，要取得这些Marker，在这里面进行修改，比如设置监听器是个不错的选择，描述里说明可以通过LocalResultPoi对象的marker属性，不过我们查阅API会发现，LocalResultPoi对象根本就没有marker这个属性，其实确实是没有，但在这里也是可以直接用的：

1 local.setMarkersSetCallback(function(pois){
2     for(var i=0;i<pois.length;i++){
3         markerArr[i]=pois[i].marker;
4         pois[i].marker.addEventListener("infowindowopen", function(e){
5             //do something
6         })  
7     }
8 })

在这里我用一个markerArr数组存下了所有的Marker，并且为每个Marker添加了infowindowopen事件。

 

第二个问题困扰了我一下午，也没有用我最初的想法解决，我想自定义结果面板，但是仍然想在点击一个地点后，地图上打开对应地点的信息窗，我的最初构想是点击文字后，模拟触发对应Marker的click事件，结果让我愤慨的是，百度地图好像并没有提供模拟触发事件的接口，在网上搜到了一个封装的EventWapper对象，但是也没有起作用，最后无奈之下，只能是利用数据接口自己来实现这个信息窗了：

 1 var local = new BMap.LocalSearch(map, {  
 2     renderOptions: {  
 3         map: map,  
 4        autoViewport: true,  
 5        selectFirstResult: false  
 6     },
 7     onSearchComplete: function(results){ 
 8         //可以得到搜索结果且搜索结果不为空 
 9         if(local.getStatus() == BMAP_STATUS_SUCCESS){
10         var html="";
11         //遍历结果第一页的点，自定义结果面板
12         for (var i = 0; i < results.getCurrentNumPois(); i++){  
13             var poi = results.getPoi(i);
14                 //下面根据LocalResultPoi对象的值拼html代码，此处略
15                 title[i] = poi.title;
16                 if(poi.address)
17                     address[i] = poi.address;
18                 if(poi.phoneNumber)
19                     telephone[i] = poi.phoneNumber;
20             } 
21                         
22             //重新遍历第一页所有点，对结果面板中的每一条记录添加click事件
23             for (var i = 0; i < results.getCurrentNumPois(); i++){  
24                 $("#poi" + i).click(function(){
25                     //这里用前面title、address、telephone三个数组中存放的值来拼信息窗里的html代码，存在变量content中，然后：
26                     var info = new BMap.InfoWindow(content);
27                     //利用在第一个问题中的markerArr数组设置触发函数，但注意数组的索引值不能用i，因为函数运行时i已不存在，因此在构造结果面板时，每个节点我添加了一个index属性，并用下面的代码获取，设置属性的代码类似于：<div id='poi5' index='5'></div>                        
28                     markerArr[$(this).attr("index")].openInfoWindow(info);
29                })
30             } 
31         } 
32     },
33     pageCapacity: 8  
34 });

这个工作在onSearchComplete中完成，关键代码如上