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

这几天做了个关于百度地图的小项目，之前用的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中完成，关键代码如上