CustomOverlay 会受因为其它 state 修改后发生的 rerender 影响，导致闪动

[lcysgsg]

文字看不出来，图片很明显，一闪一闪的

代码

 const [test, setTest] = React.useState(0);

  React.useEffect(() => {
    setInterval(() => {
      setTest((state) => state + 1);
    }, 500);
  }, []);


  <Map
    ref={mapCallback}
    center={mapCenter}
    zoom={mapZoom.current}
    maxZoom={mapZoom.max}
    minZoom={mapZoom.min}
    enableScrollWheelZoom={true}
    style={{ position: 'fixed', left: 0, top: 0, width: '100%', height: '100%' }}
  >
      <CustomOverlay position={new BMapGL.Point(120.0538590588235, 27.611044541630818)}>
        <img src={require('@/assets/maintain-car.png')} width="63" />
      </CustomOverlay>
   </Map>

[Junior2Ran]

闪烁可能是每次update都加载图片导致，图片预先import吧

[lcysgsg]

@Junior2Ran 不行，改成 import 还是一样的问题

import imgMaintainCar from '@/assets/maintain-car.png';

<CustomOverlay
  map={mapRef.current}
  position={new BMapGL.Point(120.0538590588235, 27.611044541630818)}
>
  <img src={imgMaintainCar} />
</CustomOverlay>

[hblz]

是因为 CustomOverlay被销毁又重新创建的问题，每次只要state或是props发生改变 都会

[hblz]

感觉是React cloneElement 引起的

[lyh543]

隔壁的 @uiw/react-baidu-map 基于 createPortal 支持得很好，不过只支持 BMap。可以参照他们的源码重写一遍，并把 BMap 换成 BMapGL。

https://github.com/uiwjs/react-baidu-map/blob/master/packages/custom-overlay/src/index.tsx