Ken428965 2022-09-23 20:25 采纳率: 53.6%
浏览 36
已结题

react,引入百度地图api覆盖物后,如何对覆盖物内的文字进行换行居中在覆盖物范围内(即文字不超出覆盖物边界)?

在使用的react版本如下:

img


百度地图覆盖物 https://lbsyun.baidu.com/jsdemo.htm#eAddLabel 的代码如下:

const label = new BMapGL.Label('浦东99套', opts);
        // 自定义文本标注样式
        label.setStyle({
          cursor: 'pointer',
          height: '50px',
          width: '50px',
          lineHeight: '50px',
          fontFamily: '微软雅黑',
          fontSize: '12px',
          textAlign: 'center',
          color: 'rgb(255,255,255)',
          padding: '0px',
          border: '1.5px solid white',
          borderRadius: '50%',
          backgroundColor: 'green'
        });
        map.addOverlay(label)

目前效果如下:

img


希望实现如下效果:

img


试过在以下这行代码里加上标签p,但效果不美观:

const label = new BMapGL.Label('<p>浦东</p><p>99套</p>', opts);

请问如何才能让覆盖物内的文字进行换行居中在覆盖物范围内(即文字不超出覆盖物边界)?

  • 写回答

1条回答 默认 最新

  • MAXLZ 2022-09-25 01:19
    关注

    观察了一下,生成的label元素中,white-space默认为nowrap,所以label中的文本不会自动换。将white-space设置为initial即可。同时为了垂直水平居中,这里就是用flex了。

    label.setStyle({
        display: 'flex',
        alignItems: 'center',
        cursor: 'pointer',
        height: '50px',
        width: '50px',
        fontFamily: '微软雅黑',
        fontSize: '12px',
        textAlign: 'center',
        color: 'rgb(255,255,255)',
        padding: '0px',
        border: '1.5px solid white',
        borderRadius: '50%',
        backgroundColor: 'green',
        whiteSpace: 'initial '
      })
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 9月29日
  • 已采纳回答 9月25日
  • 创建了问题 9月23日

悬赏问题

  • ¥50 关于多次提交POST数据后,无法获取到POST数据参数的问题
  • ¥15 win10,这种情况怎么办
  • ¥15 如何在配置使用Prettier的VSCode中通过Better Align插件来对齐等式?(相关搜索:格式化)
  • ¥100 在连接内网VPN时,如何同时保持互联网连接
  • ¥15 MATLAB中使用parfor,矩阵Removal的有效索引在parfor循环中受限制
  • ¥20 Win 10 LTSC 1809版本如何无损提升到20H1版本
  • ¥50 win10 LTSC 虚拟键盘不弹出
  • ¥30 微信小程序请求失败,网页能正常带锁访问
  • ¥15 Matlab求解微分方程,如何用fish2d进行预优?
  • ¥50 CrossLink-LIF-MD6000 型 FPGA 的 CMOS 转 MIPI D-PHY IP 核功能使用异常