react-base-client 1.1.1 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-base-client",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "author": "yyc <000000@163.com>",
   "main": "src/index.ts",
   "files": [

package/src/components/AMap/index.tsx

@@ -4,6 +4,7 @@ import * as HostApp from '../../utils/hostapp';
 import { AMapType } from './typing.d';
 // @ts-ignore
 import LocationIcon from '../../assets/icon/location.svg';
+import ReactDOM from 'react-dom';
 
 // @ts-ignore
 import weiXinIcon from '../../assets/icon/weiXin.svg';
@@ -496,6 +497,64 @@ const AMapComponent = React.forwardRef<any, AMapType.Props>((props, ref) => {
     });
   };
 
+  const infoWindowRef = useRef<any>(null);
+
+  const openInfoWindow = (lng: number, lat: number, content: React.ReactNode) => {
+    if (!getAMap || !mapRef.current) return;
+    if (infoWindowRef.current) {
+      infoWindowRef.current.close();
+      infoWindowRef.current = null;
+    }
+    // 创建内容容器
+    const div = document.createElement('div');
+    div.style.position = 'relative';
+    div.style.minWidth = '200px';
+    div.style.minHeight = '120px';
+    div.style.padding = '12px 16px 8px 16px';
+    div.style.boxSizing = 'border-box';
+    div.style.background = '#fff';
+    div.style.borderRadius = '8px';
+    div.style.maxHeight = '300px';
+    div.style.overflowY = 'auto';
+
+    // 内容区
+    const contentDiv = document.createElement('div');
+    contentDiv.style.marginTop = '0px';
+    div.appendChild(contentDiv);
+
+    // 渲染 React 组件
+    let renderContent: React.ReactElement = <></>;
+    if (React.isValidElement(content)) {
+      renderContent = content as React.ReactElement;
+    } else {
+      renderContent = <span>{String(content)}</span>;
+    }
+    ReactDOM.render(renderContent, contentDiv);
+
+    // 点击内容关闭
+    contentDiv.onclick = () => {
+      if (infoWindowRef.current) {
+        infoWindowRef.current.close();
+        infoWindowRef.current = null;
+      }
+    };
+
+    const infoWindow = new getAMap.InfoWindow({
+      content: div,
+      offset: new getAMap.Pixel(0, -20),
+      autoMove: true,
+      closeWhenClickMap: true,
+    });
+    infoWindow.open(mapRef.current, [lng, lat]);
+    infoWindowRef.current = infoWindow;
+  };
+  const closeInfoWindow = () => {
+    if (infoWindowRef.current) {
+      infoWindowRef.current.close();
+      infoWindowRef.current = null;
+    }
+  };
+
   useEffect(() => {
     console.log('Map component mounted');
     let intervalIdRef: NodeJS.Timeout | null = null;
@@ -577,6 +636,8 @@ const AMapComponent = React.forwardRef<any, AMapType.Props>((props, ref) => {
   useImperativeHandle(ref, () => {
     return {
       setZommAndCenterViewNoMap,
+      openInfoWindow,
+      closeInfoWindow
     };
   });
 

package/src/components/XAMap/index.tsx

@@ -57,7 +57,7 @@ const XAMap: React.FC<XAMapProps> = (props) => {
 
   return (
     <>
-      <div
+      <div 
         onClick={handleMapClick}
         style={{
           padding: '12px',
@@ -67,11 +67,20 @@ const XAMap: React.FC<XAMapProps> = (props) => {
           cursor: 'pointer',
           minHeight: '40px',
           display: 'flex',
-          alignItems: 'center',
+          flexDirection: 'column',
+          alignItems: 'flex-start',
           color: value ? '#000' : '#999'
         }}
       >
-        {value ? '点击查看地图' : placeholder}
+        {value && value['设备类型'] ? (
+          <>
+            <div>设备类型：{value['设备类型'] || '-'}</div>
+            <div>地址：{value['地址'] || '-'}</div>
+            <div>设备编号：{value['设备编号'] || '-'}</div>
+          </>
+        ) : (
+          <span>{placeholder}</span>
+        )}
       </div>
 
       <Popup