信息窗口

这一小节我们将实现创建信息窗口以及点击标注出现信息窗口。

1、简介

信息窗口在地图上方的浮动显示HTML内容。信息窗口可直接在地图上的任意位置打开，也可以在标注对象上打开（此时信息窗口的坐标与标注的坐标一致）。 您可以使用InfoWindow来创建一个信息窗实例，注意同一时刻地图上只能有一个信息窗口处于打开状态。

2、信息窗口的创建

我们通过BMap.InfoWindow(content, opts)函数创建一个信息窗口，content可以是HTML内容opts是一个包含width、height、maxWidth、offset、title、enableAutoPan(是否开启信息窗口打开时地图自动移动)、enableCloseOnClick（是否开启点击地图关闭信息窗口）、enableMessage（是否在信息窗里显示短信发送按钮）、message（自定义部分的短信内容）属性的对象。

var sContent ='<div class="infoWindow"><img src=\"'+hotel.img.big+'\" /><div class="clearfloat">'+'<span>'+hotel.name+'</span>'+'<span>'+hotel.price+'</span>'+'</div>' +'<a>查看详情</a>'+'</div>'+
                    '</div>';

var opts = {
    maxWidth:250px
}
var infoWindow = new BMap.InfoWindow(sContent,opts);

3、为标注绑定点击打开信息窗口事件

我们需要改造一下addMarker函数，将hotel信息传入，在加入标注时绑定事件，并加入创建信息窗口prodInfoWindow函数

function prodInfoWindow(hotel){
    var sContent ='<div class="infoWindow"><img src=\"'+hotel.img.big+'\" /><div class="clearfloat">'+'<span>'+hotel.name+'</span>'+'<span>'+'&yen;'+hotel.price+'</span>'+'</div>' +'<a>查看详情</a>'+'</div>'+
            '</div>';
    var infoWindow = new BMap.InfoWindow(sContent);
    return infoWindow;
}

function addMarker(hotel){
    var marker = new BMap.Marker(new BMap.Point(hotel.location[0],hotel.location[1]));
    map.addOverlay(marker);
    marker.addEventListener('click', function () {
        var infoWindow = prodInfoWindow(hotel);
        this.openInfoWindow(infoWindow);
    })
}