Bug：自定义覆盖物在地图缩放时产生偏移，且页面切换，回到地图后没有加载自定义覆盖物

[sundjly]

自定义的组件为：

import React from 'react';
import { ReactComponent, Overlay } from 'rc-bmap';
const container = {
  width: 53,
  height: 53,
  border: '3px solid red',
  borderRadius:'50%'
};

@ReactComponent
class CustomOverlay extends Overlay {
  render() {
    return (
      <div style={ container }>
        <img style={{width: 50,height: 50, borderRadius:'50%'}} data-id={this.props.cameraId} alt="" src={this.props.imgSrc} />
      </div>
    );
  }
}

export default CustomOverlay;

在地图中使用参考了
https://bmap.jser-club.com/guide/overlay.html#%E5%9F%BA%E7%A1%80%E7%B1%BB
发现了：
自定义覆盖物在地图缩放时产生偏移，且页面切换，回到地图后没有加载自定义覆盖物

[erdongmaqiao]

这个我也碰到了，大佬有解么，从其他页面切换回地图页，自定义的覆盖物就加载不出来，通过getOverlays方法可以看到有add成功，但就是显示不出来

[huajie6]

同上，不仅是自定义覆盖物，自定义控件也有同样的问题。

[sundjly]

经过查看源码，发现是promise异步的原因导致的，因为每次重新进入会生成新的bMapInstance，而自定义覆盖物取到的bMapInstance是上一次的，所以没有加载出来（加载到了上一次的地图实例里面了）。通过setTimeout的hook可以暂时解决这个问题，
在Map/index.js中

 componentDidMount() {
    const { ak } = this.props;
    if (ak) {
      this.getMapScript().then(this.init);
    } else if (global.BMap) {
      this.init(global.BMap);
    } else {
      console.warn('BMap is undefined');
    }
  }

觉得应该修改一下顺序

componentDidMount() {
  const { ak } = this.props;
  if (global.BMap) {
    this.init(global.BMap);
  }
  else if (ak) {
    this.getMapScript().then(this.init);
  }
  else {
    console.warn('BMap is undefined');
  }
}

[sundjly]

目前自定义覆盖物获取不到当前实例，可以在自定义覆盖物调用的时候用setTimeout，如下

setTimeout(()=> {
  this.map = window.bMapInstance
  // instance为自定义覆盖物的实例
  this.instance = instance;
  this.map.addOverlay(this.instance);
},300)

[erdongmaqiao]

bug太多，已经选择放弃了，换用饿了么团队维护的高德地图了

[JserWang]

@sundjly 嗨，感谢对上述问题的回答，新版本即将发布，上面的问题都会得到解决。重新写了所有的实现，关于自定义覆盖物偏移，指的是？另外你的解决方案中，14是哪里来的？

[sundjly]

@JserWang 您好！是指通过Array.map()方法返回的一组自定义覆盖物，在缩放的时候，其绝对位置发生改变（如地图缩小后，自定义覆盖物没有聚合在一起），之前把偏移量改成固定值还是有问题