fix(InfoWindow): Fix props position controlled.

uiwjs · Dec 8, 2020 · 52893aa · 52893aa
1 parent a88c8e9
commit 52893aa
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 6 deletions.
diff --git a/src/InfoWindow/README.md b/src/InfoWindow/README.md
@@ -104,17 +104,17 @@ const Example = () => {
   return (
     <>
       <input type="text" value={content} onChange={(evn) => setContent(evn.target.value)}/>
-      <div style={{ width: '100%', height: '500px' }}>
+      <div style={{ width: '100%', height: '300px' }}>
         <Map zoom={14} center={[116.397637, 39.900001]}>
           <Marker
             title="北京市"
             position={new AMap.LngLat(116.405285,39.904989)}
             onClick={(evn) => {
               if (!show) {
-                setWinPosition(evn.lnglat);
+                setWinPosition(new AMap.LngLat(116.405285,39.904989));
                 setShow(true);
               } else {
-                setWinPosition(evn.lnglat);
+                setWinPosition(new AMap.LngLat(116.405285,39.904989));
               }
             }}
           />
@@ -123,10 +123,10 @@ const Example = () => {
             position={new AMap.LngLat(116.415285,39.905589)}
             onClick={(evn) => {
               if (!show) {
-                setWinPosition(evn.lnglat);
+                setWinPosition(new AMap.LngLat(116.415285,39.905589));
                 setShow(true);
               } else {
-                setWinPosition(evn.lnglat);
+                setWinPosition(new AMap.LngLat(116.415285,39.905589));
               }
             }}
           />
@@ -155,6 +155,56 @@ ReactDOM.render((
 ```
 <!--End-->
 
+### 点标记点弹出信息窗体 Ref 实现
+
+<!--DemoStart,bgWhite,noScroll--> 
+```jsx
+import React, { useState, useRef } from 'react';
+import { Map, Marker, APILoader, InfoWindow } from '@uiw/react-amap';
+
+const Example = () => {
+  const mapRef = useRef();
+  const winRef = useRef();
+  const [winPosition, setWinPosition] = useState();
+  const [content, setContent] = useState('<div>高德软件</div>');
+  return (
+    <>
+      <input type="text" value={content} onChange={(evn) => setContent(evn.target.value)}/>
+      <div style={{ width: '100%', height: '300px' }}>
+        <Map ref={mapRef} zoom={14} center={[116.397637, 39.900001]}>
+          <Marker
+            title="北京市"
+            position={new AMap.LngLat(116.405285,39.904989)}
+            onClick={(evn) => {
+              winRef.current.infoWindow.open(mapRef.current.map, new AMap.LngLat(116.405285,39.904989))
+            }}
+          />
+          <Marker
+            title="北京市"
+            position={new AMap.LngLat(116.415285,39.905589)}
+            onClick={(evn) => {
+              winRef.current.infoWindow.open(mapRef.current.map, new AMap.LngLat(116.415285,39.905589))
+            }}
+          />
+          <InfoWindow
+            ref={winRef}
+            offset={{ x: 0, y: -30}}
+            content={content}
+          />
+        </Map>
+      </div>
+    </>
+  );
+}
+
+ReactDOM.render((
+  <APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
+    <Example />
+  </APILoader>
+), _mount_);
+```
+<!--End-->
+
 ### Props
 
 | 参数 | 说明 | 类型 | 默认值 |

diff --git a/src/InfoWindow/useInfoWindow.tsx b/src/InfoWindow/useInfoWindow.tsx
@@ -38,7 +38,7 @@ export const useInfoWindow = (props = {} as UseInfoWindow) => {
   }, [visiable, infoWindow]);
 
   useEffect(() => {
-    if (!map || !infoWindow) return;
+    if (!map || !infoWindow || !visiable) return;
     const positionCenter = map.getCenter();
     infoWindow.open(map, position || positionCenter);
   }, [position]);