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

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日

悬赏问题

  • ¥15 求京东批量付款能替代天诚
  • ¥15 slaris 系统断电后,重新开机后一直自动重启
  • ¥15 51寻迹小车定点寻迹
  • ¥15 谁能帮我看看这拒稿理由啥意思啊阿啊
  • ¥15 关于vue2中methods使用call修改this指向的问题
  • ¥15 idea自动补全键位冲突
  • ¥15 请教一下写代码,代码好难
  • ¥15 iis10中如何阻止别人网站重定向到我的网站
  • ¥15 滑块验证码移动速度不一致问题
  • ¥15 Utunbu中vscode下cern root工作台中写的程序root的头文件无法包含