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

最新推荐文章于 2022-11-02 00:15:27 发布

jocchoc

最新推荐文章于 2022-11-02 00:15:27 发布

阅读量1.3k

点赞数 2

分类专栏：日常小纠结文章标签： web 百度地图自定义标柱圆形头像

本文链接：https://blog.csdn.net/wp_boom/article/details/96278472

版权

项目需求
基于百度地图，在当前用户的位置上，呈现用户圆形的头像。并附加一个水滴状的背景图。如图所示：
基本思路
原本打算通过BMap.Icon分别来添加水滴背景和头像，并用叠加的方式来显示。但是后台返回的头像是矩形，API里面也没有找到圆角化功能。所以，此处使用自定义标柱的方式来实现该功能。（如果后台返回的图片为圆形，建议用叠加的方式）
具体实现
第一步：自定义头像覆盖物的构造函数
我们希望通过 “位置”、“头像资源”、“头像大小” 来确定一个具体的标柱。所以将该3个属性作为参数并实现一个构造函数
```
function CircleImgOverlay(point, headerImg, { width = 50, height = 65 }) {
  this._point = point;
  this._headerImg = headerImg;
  this._width = width;
  this._height = heig
```

关注