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

本文介绍了如何在web端基于百度地图API实现自定义的圆形头像标柱。由于API不支持直接圆角化图标,因此采用自定义标柱的方式,通过构造函数设定位置、头像资源和大小,继承BMap.Overlay,实现initialize方法来绘制头像覆盖物,并调整位置偏移以达到预期效果。
摘要由CSDN通过智能技术生成

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 = ne
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值