【百度地圖】使用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中完成，關鍵代碼如上