【百度地图】使用LocalSearch获取返回Marker及自定义结果面板

 

声明：转载自http://www.haodaima.net/art/1315203

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

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

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

 local.setMarkersSetCallback(function(pois){
     for(var i=0;i<pois.length;i++){
         markerArr[i]=pois[i].marker;
         pois[i].marker.addEventListener("infowindowopen", function(e){
             //do something
         })  
     }
 })

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

 

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

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

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