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

Question

在使用的react版本如下：

百度地图覆盖物 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)

目前效果如下：

希望实现如下效果：

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

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

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

Answer 1

观察了一下，生成的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 '
  })