web端基于百度地图,实现自定义圆形头像标柱
-
项目需求
基于百度地图,在当前用户的位置上,呈现用户圆形的头像。并附加一个水滴状的背景图。如图所示:
-
基本思路
原本打算通过BMap.Icon分别来添加水滴背景和头像,并用叠加的方式来显示。但是后台返回的头像是矩形,API里面也没有找到圆角化功能。所以,此处使用自定义标柱的方式来实现该功能。(如果后台返回的图片为圆形,建议用叠加的方式) -
具体实现
第一步:自定义头像覆盖物的构造函数
我们希望通过 “位置”、“头像资源”、“头像大小” 来确定一个具体的标柱。所以将该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 = ne