关于百度地图

infoBox

当infoWindow无法满足需求的时候，可以使用infoBox代替。

首先，引入插件：

// 延迟是为了保证百度地图先加载完毕，然后再加载插件。
componentDidMount() {
    // 加载 Infobox
    let el = document.createElement('script')
    el.src = './resources/js/InfoBox_min.js'
    setTimeout(() => {
      document.body.appendChild(el)
    }, 1000)
  }

InfoBox_min.js 文件可以尝试从百度地图开发文档里找到，不过比较难找。

然后，生成信息弹窗：

// 构造信息窗口
  generateInfoBox(id) {
    const { dispatch } = this.props
    const { infoBox } = this.props[namespace]
    if (this.map && window.BMapLib && window.BMapLib.InfoBox) {
      this.infoBox = new window.BMapLib.InfoBox(
        this.map.state.gis,
        `<div id='box_${id}'></div>`,
        {
          boxStyle: {
            width: '400px',
            height: 'auto'
          },
          closeIconUrl: 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',
          offset: new BMap.Size(0, 80)
        }
      )
      this.infoBox.enableAutoPan()

      setTimeout(() => {
        ReactDOM.render(
          <InfoBox {...infoBox} />,
          document.getElementById(`box_${id}`)
        )
      }, 100)
    }
  }

因为我不需要关闭图标，所以，这里用了一个1px*1px的透明图片占位。此外，offset生效的前提是boxStyle里设置了width和height。（吐血了）

地点会出现弹窗

在使用 echart 结合百度地图的时候出现了奇怪的情况：某些浏览器版本下百度地图上面的地点可以点击，随后会出现弹窗。

根据网友的文章，添加了配置项：

bmap: {

  // ……
  enableMapClick: false,
},