一步一步开发电商平台 区域广告实现
技术需求描述：
（1）以北京市为例，以北京市中心点坐标为原点，创建类表格覆盖物，表格代表的宽高均代表一公里。每一块单元格都有自己的编号。
- 格式 html+js 地图为百度地图
- 兼容性 ie6+ 以及其他主流浏览器支持
- 以市中心坐标点为中心区块的中心点
- 以数学的x，y轴坐标系，作为区块编号命名的依据
- 每一个区块都是一个正方形，宽高都是一公里
- 地图及上面的表格覆盖物能放大缩小
- 遮罩层的每个方块都可以点击，点击后方块变深色，再次点击恢复原色，并可以记录点击的那个区块。
- 能以字符串或数组，初始化覆盖物表格中的已选中区块
- 能将地图中心点定位到某一点（百度地图支持），相关的覆盖物对应显示
- 能根据配置，设置覆盖物的大小（n*m个方块）和每一个区块的大小（之前提到的宽高1公里可设置）
（2） 相应的JavaScript API
ClearAllArea() 作用清空所有以选中的区块
ClickArea() 点击区块后执行的函数
InitArea（str，bool）初始化区域
参数说明：str 字符串，格式为01_12,23_11 已选中的区块
Bool bool类型，true或false ，true 代表初始化的区块可再次点击编辑，false 代表初始化的区块不可编辑（区块颜色区分正常其他颜色）。
/* 这块本来想外包出去，当时主要忙于支付模块的开发，没人接，最后还是自己搞。
技术实现：
利用百度地图API中的自定义覆盖物实现
单个自定义的覆盖物可以满足一个区块的所有功能，对于那么多区块怎么办，循环产生多个区块让他们一个挨着一个。功能就实现了。
（这块有一个性能问题，因为每一个区块都是一个对象，都要消耗内存和计算资源，这样会使浏览器占用大量内存，还有每次对地图的缩放都会使这些区块全部重绘。所以区块的数量要进行限制。900个区块（30*30）的时候浏览器就很卡了）
// 定义自定义覆盖物的构造函数
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";
}
/* 实现中点击事件的绑定 刚开始 使用 传方法名，然后动态调用。但有问题，单独触发事件时 没问题，放在for循环中 就有问题，最后改为固定的方法名。
