fix: #106 add container style and fix the draw

JserWang · May 6, 2019 · 3760289 · 3760289
1 parent c1c7f2a
commit 3760289
Showing 1 changed file with 12 additions and 3 deletions.
diff --git a/src/components/Overlay/Custom.js b/src/components/Overlay/Custom.js
@@ -4,6 +4,11 @@ import BaseOverlay from './BaseOverlay';
 
 const { MAP_PANES } = Constants;
 
+// fix: #106 the custom overlay's container position should be absolute
+const containerStyle = {
+  position: 'absolute',
+};
+
 const CustomHOC = WrappedComponent => class extends BaseOverlay {
   config = {}
 
@@ -31,17 +36,21 @@ const CustomHOC = WrappedComponent => class extends BaseOverlay {
     const { container, mapInstance } = this;
     const { point } = this.config;
     const bdPoint = Util.convert2BPoint({ ...point });
+    // 当地图scroll时，container的高度为0 宽度为0，导致计算出现错误，所以存储上次有效宽高
+    this.lastWidth = container.offsetWidth > 0 ? container.offsetWidth : this.lastWidth;
+    this.lastHeight = container.offsetHeight > 0 ? container.offsetHeight : this.lastHeight;
+
     const position = mapInstance.pointToOverlayPixel(bdPoint);
-    container.style.left = `${position.x - (container.offsetWidth / 2)}px`;
-    container.style.top = `${position.y - (container.offsetHeight / 2)}px`;
+    container.style.left = `${position.x - (this.lastWidth / 2)}px`;
+    container.style.top = `${position.y - (this.lastHeight / 2)}px`;
   }
 
   render() {
     const { context } = this;
     const { children } = this.props;
     return (
       <div>
-        <div ref={this.getContainer}>
+        <div ref={this.getContainer} style={containerStyle}>
           <WrappedComponent
             map={context.getMapInstance()}
             {...this.props}