一步一步开发电商平台 区域广告实现

// 定义自定义覆盖物的构造函数 

function SquareOverlay(x,y,center,color,eve){

this._latPer=0.008998;

this._lngPer=0.011711;

 this._name=x+"_"+y; 

 this._x=x;//x坐标索引

 this._y=y; //y坐标索引

 this._center = center;   

 this._length = length;   

 this._color = color;   

 this._minLng = center.lng - this._lngPer / 2+ x * this._lngPer;

 this._maxLng = center.lng + this._lngPer / 2+ x * this._lngPer;

 this._minLat = center.lat - this._latPer / 2+ y * this._latPer;

 this._maxLat = center.lat + this._latPer / 2+ y * this._latPer;

}

// 继承API的BMap.Overlay   

SquareOverlay.prototype = new BMap.Overlay();

// 实现初始化方法

SquareOverlay.prototype.initialize = function (map) {

    // 保存map对象实例  

    this._map = map;

    // 创建div元素，作为自定义覆盖物的容器  

    var div = document.createElement("div");

    div.name = this._name;

    div.style.position = "absolute";

 

    var maxPixel = map.pointToOverlayPixel(new BMap.Point(this._maxLng, this._maxLat));

    var minPixel = map.pointToOverlayPixel(new BMap.Point(this._minLng, this._minLat));

    div.style.width = Math.abs(maxPixel.x - minPixel.x) + "px";

    div.style.height = div.style.width;    //Math.abs(maxPixel.y-minPixel.y) + "px";

    div.style.backgroundColor = this._color; //填充颜色

    div.style.filter = "alpha(opacity=55)"; //透明度兼容ie8

    div.style.opacity = 0.55;  //透明度

    div.style.border = "1px solid #6390ff"; //设置边框和 边框颜色

    div.onclick = AreaClick;

    // 将div添加到覆盖物容器中 

    map.getPanes().floatPane.appendChild(div);

    // 保存div实例  

    this._div = div;

    // 需要将div元素作为方法的返回值，当调用该覆盖物的show、  

    // hide方法，或者对覆盖物进行移除时，API都将操作此元素。  

    return div;

}

// 实现绘制方法  

SquareOverlay.prototype.draw = function(){   

// 根据地理坐标转换为像素坐标，并设置给容器   

 var leftposition= this._map.pointToOverlayPixel(new BMap.Point(this._minLng,this._maxLat));

 var maxPixel=this._map.pointToOverlayPixel(new BMap.Point(this._maxLng,this._maxLat));

 var minPixel=this._map.pointToOverlayPixel(new BMap.Point(this._minLng,this._minLat));

 this._div.style.left = leftposition.x  + "px";   

 this._div.style.top = leftposition.y + "px";   

 this._div.style.width =Math.abs(maxPixel.x-minPixel.x) + "px";

 this._div.style.height =Math.abs(maxPixel.y-minPixel.y) + "px";

}