百度地图自定义覆盖物

 var mp = new BMap.Map("allmap", {
  minZoom: 13,
  maxZoom: 19,
  enableMapClick: false
}); // 创建Map实例,设置地图允许的最小/大级别//创建地图实例
    mp.centerAndZoom(new BMap.Point(114.2954643, 30.59610888), 15);
    //地图初始化，设置中心点坐标和地图级别。地图必须经过初始化才可以执行其他操作
　　//启用鼠标滚轮放大缩小
    mp.enableScrollWheelZoom();
    //1、定义构造函数并继承Overlay
　　//定义自定义覆盖物的构造函数  
     function ComplexCustomOverlay(point, text){
      this._point = point;
      this._text = "编号:"+text;  
    }
   


   
　　 // 继承API的BMap.Overlay  
    ComplexCustomOverlay.prototype = new BMap.Overlay();
    //2、初始化自定义覆盖物
    // 实现初始化方法  
    ComplexCustomOverlay.prototype.initialize = function(map){
      // 保存map对象实例 
      this._map = map;
      // 创建div元素，作为自定义覆盖物的容器  
      var div = this._div = document.createElement("div");
      div.style.position = "absolute";
      div.style.zIndex = 0;//聚合功能?
      // 可以根据参数设置元素外观
 div.style.backgroundColor = "#2d69f9";      
      div.style.color = "white";
      div.style.width = "110px";
      div.style.padding = "5px";
      div.style.lineHeight = "18px";
      div.style.whiteSpace = "nowrap";
      div.style.MozUserSelect = "none";
      div.style.fontSize = "12px";
      div.style.textAlign='center';
      div.className='aDiv';
      var span = this._span = document.createElement("span");
      div.appendChild(span);
      span.appendChild(document.createTextNode(this._text));      
      var that = this;
       var arrow = this._arrow = document.createElement("div");
      arrow.style.width = "0px";
      arrow.style.position = "relative";
      arrow.style.height = "0px";
      arrow.style.borderLeft = "10px solid transparent";
      arrow.style.borderRight = "10px solid transparent";
      arrow.style.borderTop="10px solid #2d69f9" 
      arrow.style.left="17px";
      arrow.style.top="12px";
      arrow.className='aR'
      div.appendChild(arrow);
      
      div.onmouseover = function(){
        this.className='bgO';
    this.children[1].className='borderO';
    this.style.zIndex=100;
      }
      div.onmouseout = function(){
        this.className='bgB';
    this.children[1].className='borderB';
    this.style.zIndex=0;
      }
　    // 将div添加到覆盖物容器中  
      mp.getPanes().labelPane.appendChild(div);//getPanes(),返回值:MapPane,返回地图覆盖物容器列表  labelPane呢???
      // 需要将div元素作为方法的返回值，当调用该覆盖物的show、  
      // hide方法，或者对覆盖物进行移除时，API都将操作此元素。
      return div;
       
    }
 
    //鼠标经过
    
    //3、绘制覆盖物
    // 实现绘制方法
    ComplexCustomOverlay.prototype.draw = function(){
      var map = this._map;
      var pixel = map.pointToOverlayPixel(this._point);
      this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
      this._div.style.top  = pixel.y - 30 + "px";
    }
   
    //4、自定义覆盖物添加事件方法
    ComplexCustomOverlay.prototype.addEventListener = function(event,fun){
        this._div['on'+event] = fun;
    }
    //5、 为自定义覆盖物添加点击事件
$.get('/ph/Api/get_ban_map_point',function(res){
res = JSON.parse(res);
var aDate = res.data.point.length;
var myCompOverlay='';

for (var i = 0; i < aDate; i++) {

myCompOverlay = new ComplexCustomOverlay(new BMap.Point(parseFloat(res.data.point[i].BanGpsX),parseFloat(res.data.point[i].BanGpsY)),res.data.point[i].BanID);
   
    mp.addOverlay(myCompOverlay);//将标注添加到地图中
    var aR=$('.aR');
    var aDiv = $('.aDiv');
   
    myCompOverlay.addEventListener('click',function(){
    for(var i=0;i<aR.length;i++){
    aR[i].className='borderB';
    aDiv[i].className='bgB';
    aDiv[i].onmouseout=function(){
    this.className='bgB';
    this.children[1].className='borderB';
    this.style.zIndex=0;
    }
   
    }
   
this.removeClass='bgB';
this.children[1].removeClass='borderB';
this.className='bgO';
    this.children[1].className='borderO';
this.onmouseout=function(){
return false;
}
})
}

  

})

里面有鼠标经过，点击移除事件。我觉得我写的比较复杂，但是效果出来就好了~~不知道能不能帮助到一些人。。

get的数据你们可以自己用json写下。