自定义覆盖物

这一小节我们需要用自定义覆盖物实现鼠标滑过右侧宾馆选项时出现的宾馆信息

要创建自定义覆盖物，您需要做以下工作：

1)定义一个自定义覆盖物的构造函数，通过构造函数参数可以传递一些自由的变量,这里我们传入一个的旅馆信息。

2)设置自定义覆盖物对象的prototype属性为Overlay的实例，以便继承覆盖物基类。

3)实现initialize方法，当调用map.addOverlay方法时，API会调用此方法，在此方法中我们生成一个div并将图片价格地址等信息引入，可以在css属性框为其写入你想要的样式。

4)实现draw方法，我们在此方法中绘制div并设置div出现的位置。

代码如下：

function ComplexCustomOverlay(point,hotelInfo){
    this._point = point;
    this._hotelInfo = hotelInfo;
}
ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function(map){
    this._map = map;
    var div = this._div = document.createElement("div");
    div.style.position = "relative";

    div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
    div.className = 'hotelInfo clearfloat';
    div.innerHTML = '<img src=\"'+this._hotelInfo.img.big+'\"/> <div class="name">'+this._hotelInfo.name+'</div> <div class="address">'+this._hotelInfo.address+'</div> <span class="price">'+'&yen;'+this._hotelInfo.price+'</span>';
    div.style.backgroundColor = "white";
    div.style.width = '220px';
    div.style.height = '54px';
    map.getPanes().labelPane.appendChild(div);

    return div;
};
ComplexCustomOverlay.prototype.draw = function(){
    var map = this._map;
    var pixel = map.pointToOverlayPixel(this._point);
    this._div.style.left = pixel.x - 55 +"px";
    this._div.style.top  = pixel.y + 3 + "px";
};

大家可以自行修改自定义覆盖物的样式，加油。