建立元件之前要先定義BMap和BMapLib：

const BMap = window.BMap;
const BMapLib = window.BMapLib;

首先，可以將地圖作為props傳入到元件中，因為渲染時間問題，有可能在接收到map之前就進行了渲染，所以要在元件的生命週期內接收這個引數，並且呼叫建立覆蓋物的方法：

componentWillReceiveProps(nextProps) {
    if (nextProps) {
      this.showMarker(mapdata, nextProps.map);
    }
  } 

以下是建立覆蓋物的方法：

  showMarker(data, map) {
    // const { map } = this.props;
    map.clearOverlays();
    const len = data.length;

    if (data.length) {
      for (let i = 0; i < len; i++) {
        const item = data[i];
        let myicon = '/resource/images/icon/sensing_icon_home.png';
        switch (item.type) {
          case 'home': myicon = '/resource/images/icon/sensing_icon_home.png'; break;
          case 'ball': myicon = '/resource/images/icon/sensing_icon_ball.png'; break;
          case 'car': myicon = '/resource/images/icon/sensing_icon_car.png'; break;
          default: myicon = '/resource/images/icon/sensing_icon_home.png';
        }
        const point = new BMap.Point(item.lng, item.lat);
        const icon = new BMap.Icon(myicon, new BMap.Size(50, 50));
        const marker = new BMap.Marker(point, { icon });
        map.addOverlay(marker);
        // 以上的程式碼是建立marker，以下的程式碼是建立資訊彈窗
        marker.addEventListener('click', () => {
          const desp = (
            <div className={style.infoBox}>
              <p>工作時間：{item.time}</p>
              <p>單體淨化量：{item.capacity}</p>
              <p>淨化效果：{item.effect}</p>
            </div>
          );
          const searchInfoWindow = new BMapLib.SearchInfoWindow(map, `<div id='box_${item.id}'></div>`, {
            title: '<span>XX淨化球</span>',
            width: 180,
            height: 'auto',
            panel: 'panel',
            enableAutoPan: true,
            enableSendToPhone: false,
            searchTypes: []
          });
          searchInfoWindow.open(point);
          setTimeout(() => {
            ReactDOM.render(
              desp,
              document.getElementById(`box_${item.id}`)
            );
          }, 20);
        });

        const option = {
          position: point,
          offset: new BMap.Size(-50, -50),
        };
        //這裡實現覆蓋物上呈現光圈閃現效果
        const valueLabel = new BMap.Label(`<div class=${item.type === 'car' ? style.classScale : ''} style='width:100px;height:100px;border:1px solid RGBA(40, 223, 152, 0.1);background-color:RGBA(40, 223, 152, 0.1);border-radius:50%;'></div>`, option);
        valueLabel.setStyle({
          border: 'none',
          backgroundColor: 'RGBA(0,0,0,0)',
        });
        map.addOverlay(valueLabel);
      }
    }
  }
 

修改彈窗的樣式，在全域性樣式檔案 中修改：

.BMapLib_SearchInfoWindow .BMapLib_bubble_tools div{
    // height: 0 !important;
    background-color: transparent;
  }
  .BMapLib_SearchInfoWindow{
    .BMapLib_trans{
      opacity: 0;
    }
    .BMapLib_bubble_top{
      height: auto;
      border: none;
    }
    .BMapLib_bubble_title{
      color: #fff;
      font-size: 20px;
      background-color: #1A1E33;
      padding: 10px 20px;
      height: auto;
      line-height: normal;
    }
  }
  .BMapLib_SearchInfoWindow{
    border: none;
    background-color: rgba(0, 0, 0, .5);
    color: #fff;
  }
}
 

以下是實現的網頁效果：