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

梦里梦外; 2021-12-05 14:57 733阅读 0赞

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

1.  项目需求  
    基于百度地图，在当前用户的位置上，呈现用户圆形的头像。并附加一个水滴状的背景图。如图所示：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dwX2Jvb20_size_16_color_FFFFFF_t_70]
2.  基本思路  
    原本打算通过BMap.Icon分别来添加水滴背景和头像，并用叠加的方式来显示。但是后台返回的头像是矩形，API里面也没有找到圆角化功能。所以，此处使用[自定义标柱][Link 1]的方式来实现该功能。（如果后台返回的图片为圆形，建议用叠加的方式）
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.  结果展示  
    ![在这里插入图片描述][20190717104002151.png]
5.  更多扩展  
    请参阅[官方文档][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dwX2Jvb20_size_16_color_FFFFFF_t_70]: /images/20211205/763e24e6ffc848dfbe80c422e4f71b0f.png
[Link 1]: http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/custom-markers
[20190717104002151.png]: /images/20211205/7defe8101c024496b2196567911f9973.png