百度地图API，自定义圆形头像标柱

web端基于百度地图，实现自定义圆形头像标柱

1. 项目需求
   基于百度地图，在当前用户的位置上，呈现用户圆形的头像。并附加一个水滴状的背景图。如图所示：
   

2. 基本思路
   原本打算通过BMap.Icon分别来添加水滴背景和头像，并用叠加的方式来显示。但是后台返回的头像是矩形，API里面也没有找到圆角化功能。所以，此处使用自定义标柱的方式来实现该功能。（如果后台返回的图片为圆形，建议用叠加的方式）

3. 具体实现
   第一步：自定义头像覆盖物的构造函数
   我们希望通过 “位置”、“头像资源”、“头像大小” 来确定一个具体的标柱。所以将该3个属性作为参数并实现一个构造函数

   function CircleImgOverlay(point, headerImg, { width = 50, height = 65 }) {
     this._point = point;
     this._headerImg = headerImg;
     this._width = width;
     this._height = height;
   }
   

   第二步：继承BMap.Overlay基类，实现该基类的功能方法

   CircleImgOverlay.prototype = new BMap.Overlay();
   

   第三步：自定义初始化方法
   实现initialize方法，当调用map.addOverlay方法时，API会调用此方法。这里也是我们自定义标柱的具体实现

   CircleImgOverlay.prototype.initialize = function(map){
     this._map = map;
     var divBox = document.createElement("div");
     var divImg = document.createElement("div");
     divBox.style.position = "absolute";
     divBox.style.width = this._width + "px";
     divBox.style.height = this._height + "px";
     divBox.style.backgroundImage = "url(./images/header_bg.png)";
     divBox.style.backgroundSize = "100% 100%";
     divImg.style.position = "absolute";
     divImg.style.backgroundImage = `url(${this._headerImg})`;
     divImg.style.left = "10%";
     divImg.style.top = "7%";
     divImg.style.width = "80%";
     divImg.style.height = "60%";
     divImg.style.borderRadius = "50%";
     divImg.style.backgroundSize = "cover";
     divImg.style.border = "2px solid #ffffff";
     divBox.appendChild(divImg);
     // 将div添加到覆盖物容器中
     map.getPanes().markerPane.appendChild(divBox);
     // 保存div实例
     this._div = divBox;
     // 需要将div元素作为方法的返回值，当调用该覆盖物的show、
     // hide方法，或者对覆盖物进行移除时，API都将操作此元素。
     return divBox;
   }
   

   第四步：实现绘制方法
   到目前为止，我们仅仅把覆盖物添加到了地图上，但是并没有将它放置在正确的位置上。具体的位置偏移根据自己的背景图片大小进行确定

   var position = this._map.pointToOverlayPixel(this._point);    
   this._div.style.left = position.x - this._width / 2 + "px";
   this._div.style.top = position.y - this._height * 7 / 10 + "px";
   

   第五步：方法调用

   var headerImg = new CircleImgOverlay(data.points[0], _self.info.avatar, {});
   this.map.addOverlay(headerImg);
   

4. 结果展示
   

5. 更多扩展
   请参阅官方文档