麻点图的使用

这个小节我们将介绍searchInfoWindow并为麻点图绑定点击事件

1、引入文件

为用户绑定麻点图层点击事件，我们需要使用searchInfoWindow，我们必须引入文件

<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>

2、searchInfoWindow的使用

使用方式与InfoWindow相似，具体参数如下

searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
    title  : "百度大厦",      //标题
    width  : 290,             //宽度
    height : 105,              //高度
    panel  : "panel",         //检索结果面板
    enableAutoPan : true,     //自动平移
    searchTypes   :[
      BMAPLIB_TAB_SEARCH,   //周边检索
      BMAPLIB_TAB_TO_HERE,  //到这里去
      BMAPLIB_TAB_FROM_HERE //从这里出发
    ]
  });

3、创建prodprodInfoWindow函数

我们可以创建一个与prodInfoWindow函数类似的prodprodInfoWindow函数生成searchInfoWindow

function prodSearchInfoWindow(hotel){
    var sContent ='<div class="infoWindow"><img src=\"'+hotel.img.big+'\" /><div class="clearfloat">'+'<span>'+hotel.title+'</span>'+'<span>'+'&yen;'+hotel.price+'</span>'+'</div>' +'<a>查看详情</a>'+'</div>'+
        '</div>';
    var infoWindow = new BMapLib.SearchInfoWindow(map,sContent,{
        panel : "panel", //检索结果面板
        enableAutoPan : true, //自动平移
        searchTypes :[]
    });
    return infoWindow;
}

4、绑定点击事件

我们只需要为customLayer绑定hotspotclick事件即可

customLayer.addEventListener('hotspotclick',function(e){
    var customPoi = e.customPoi;//poi的默认字段
    var contentPoi=e.content;//poi的自定义字段
    var searchInfoWindow = prodSearchInfoWindow(contentPoi);
    var point = new BMap.Point(customPoi.point.lng, customPoi.point.lat);
    searchInfoWindow.open(point);
});

5、改写prodTileLayer函数

为麻点图绑定点击事件。

function myHotspotclick(e){
    var customPoi = e.customPoi;//poi的默认字段
    var contentPoi=e.content;//poi的自定义字段
    var searchInfoWindow = prodSearchInfoWindow(map,contentPoi);
    var point = new BMap.Point(customPoi.point.lng, customPoi.point.lat);
    searchInfoWindow.open(point);
}

function prodTileLayer(filter){
    if(customLayer) {
        map.removeTileLayer(customLayer);
    }
    customLayer=new BMap.CustomLayer({
        ak:'ir7jFwBM0tPkLebXl3ScT9cB',
        geotableId: 135736,
        q: '', //检索关键字
        tags: '', //空格分隔的多字符串
        filter: filter //过滤条件
    });
    map.addTileLayer(customLayer);
    customLayer.addEventListener('hotspotclick',myHotspotclick);
}