@cqsjjb/jjb-react-admin-component 3.3.0-beta.3 → 3.3.0-beta.4

package/AMap/index.js

@@ -1,22 +1,21 @@
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { Button, Col, message, Modal, Result, Row } from 'antd';
-import './index.less';
 const _A_MAP_SEARCH_ = '_A_MAP_SEARCH_';
 const _A_MAP_DEFAULT_POINT_ = {
   lng: 116.397437,
   lat: 39.909148
 };
-const AMap = ({
+export default function AMap({
   lng: propLng,
   lat: propLat,
   title = '高德地图',
   width = 700,
   onOk,
   onCancel
-}) => {
+}) {
   const [lng, setLng] = useState(_A_MAP_DEFAULT_POINT_.lng);
   const [lat, setLat] = useState(_A_MAP_DEFAULT_POINT_.lat);
-  const GL = useRef(null); // 地图容器，沿用你原来的名字
+  const GL = useRef(null);
   const mapRef = useRef(null);
   const markerRef = useRef(null);
   const autoRef = useRef(null);
@@ -26,78 +25,136 @@ const AMap = ({
       message.error('未导入高德地图文件，生成地图失败！').then(() => null);
       return;
     }
-    const initLng = propLng || _A_MAP_DEFAULT_POINT_.lng;
-    const initLat = propLat || _A_MAP_DEFAULT_POINT_.lat;
-    setLng(initLng);
-    setLat(initLat);
+    let mounted = true;
 
-    // 创建地图
-    const map = new window.AMap.Map(GL.current, {
-      center: [initLng, initLat],
-      zoom: 18,
-      viewMode: '3D'
-    });
-    mapRef.current = map;
+    // 保证传入的初始值是 number（避免 NaN）
+    const initLng = Number(propLng) || _A_MAP_DEFAULT_POINT_.lng;
+    const initLat = Number(propLat) || _A_MAP_DEFAULT_POINT_.lat;
 
-    // 通过 plugin 先加载需要的插件（保证控件类存在）
-    window.AMap.plugin(['AMap.Scale', 'AMap.ToolBar', 'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geocoder'], () => {
-      // 比例尺
-      try {
-        const scale = new window.AMap.Scale();
-        map.addControl(scale);
-      } catch (e) {
-        // 某些按需构建或旧环境可能报错，容错处理
-        // console.warn('AMap.Scale plugin not available', e);
+    // 等待容器可见且尺寸非 0（Modal 动画或隐藏态时常为 0）
+    const waitForVisible = (el, timeout = 3000) => new Promise(resolve => {
+      const start = Date.now();
+      function check() {
+        if (!el) return resolve(false);
+        const r = el.getBoundingClientRect();
+        if (r.width > 0 && r.height > 0) return resolve(true);
+        if (Date.now() - start > timeout) return resolve(false);
+        requestAnimationFrame(check);
+      }
+      check();
+    });
+    async function init() {
+      if (!GL.current) {
+        console.warn('AMap container ref not ready');
+        return;
+      }
+      const visible = await waitForVisible(GL.current, 3000);
+      if (!visible) {
+        // 继续也可，但记录一下。多数情况下等待后再 init 能解决 Pixel(NaN, 0)
+        console.warn('AMap container still not visible before init (proceeding anyway).');
       }
-
-      // 工具条（放大缩小）
-      try {
-        map.addControl(new window.AMap.ToolBar({
-          position: 'RT'
-        }));
-      } catch (e) {}
-
-      // 定位控件
       try {
-        const geolocation = new window.AMap.Geolocation({
-          position: 'BT',
-          offset: new window.AMap.Pixel(20, 20),
-          showCircle: false,
-          showButton: true
+        const map = new window.AMap.Map(GL.current, {
+          center: [initLng, initLat],
+          zoom: 18,
+          viewMode: '3D'
         });
-        map.addControl(geolocation);
-        geolocation.getCurrentPosition(status => {
-          if (status !== 'complete') {
-            message.error('未知原因，定位失败！');
+        mapRef.current = map;
+
+        // 保证 state 与实际中心一致
+        setLng(initLng);
+        setLat(initLat);
+
+        // 插件加载、控件创建都做容错
+        window.AMap.plugin(['AMap.Scale', 'AMap.ToolBar', 'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geocoder'], () => {
+          try {
+            map.addControl(new window.AMap.Scale());
+          } catch (e) {
+            // 某些构建/版本中可能不存在
+            console.warn('Scale control failed', e);
           }
-        });
-      } catch (e) {}
+          try {
+            map.addControl(new window.AMap.ToolBar({
+              position: 'RT'
+            }));
+          } catch (e) {
+            console.warn('ToolBar control failed', e);
+          }
+          try {
+            // 使用合法角落（RB/RT/LB/LT），不要自定义 'BT'
+            const geolocation = new window.AMap.Geolocation({
+              position: 'RB',
+              offset: new window.AMap.Pixel(Number(20), Number(20)),
+              showCircle: false,
+              showButton: true
+            });
+            map.addControl(geolocation);
 
-      // 初始 marker
-      markerRef.current = new window.AMap.Marker({
-        position: [initLng, initLat],
-        map
-      });
+            // 正确的回调签名 (status, result)
+            geolocation.getCurrentPosition((status, result) => {
+              if (status !== 'complete') {
+                // 不做致命处理，但提示
+                message.error('未知原因，定位失败！');
+              } else {
+                // 如果需要可以从 result.position 取值
+                try {
+                  const pos = result && result.position;
+                  if (pos) {
+                    const px = typeof pos.getLng === 'function' ? pos.getLng() : pos.lng;
+                    const py = typeof pos.getLat === 'function' ? pos.getLat() : pos.lat;
+                    if (!Number.isNaN(Number(px)) && !Number.isNaN(Number(py))) {
+                      setLng(Number(px));
+                      setLat(Number(py));
+                      map.setCenter([Number(px), Number(py)]);
+                    }
+                  }
+                } catch (e) {
+                  // 忽略
+                }
+              }
+            });
+          } catch (e) {
+            console.warn('Geolocation init failed', e);
+          }
 
-      // 自动完成 + 地点搜索
-      try {
-        placeSearchRef.current = new window.AMap.PlaceSearch({
-          map
-        });
-        autoRef.current = new window.AMap.AutoComplete({
-          input: document.getElementById(_A_MAP_SEARCH_)
-        });
-        autoRef.current.on && autoRef.current.on('select', e => {
-          // e.poi 里通常包含 name / location / adcode 等信息
-          const name = e?.poi && (e.poi.name || e.poi.address) || e?.info || e?.name;
-          // if (!name) return;
-          placeSearchRef.current.search(name, (status, result) => {
-            if (status === 'complete' && result && result.poiList && result.poiList.pois && result.poiList.pois.length > 0) {
-              const poi = result.poiList.pois[0];
-              const loc = poi.location || poi.lnglat;
-              const foundLng = loc && (loc.lng || Array.isArray(loc) && loc[0]) || null;
-              const foundLat = loc && (loc.lat || Array.isArray(loc) && loc[1]) || null;
-              if (foundLng != null && foundLat != null) {
+          // 初始 marker 放置
+          try {
+            markerRef.current = new window.AMap.Marker({
+              position: [initLng, initLat],
+              map
+            });
+          } catch (e) {
+            console.warn('Marker init failed', e);
+          }
+
+          // AutoComplete + PlaceSearch
+          try {
+            placeSearchRef.current = new window.AMap.PlaceSearch({
+              map
+            });
+            autoRef.current = new window.AMap.AutoComplete({
+              input: document.getElementById(_A_MAP_SEARCH_)
+            });
+            autoRef.current.on && autoRef.current.on('select', e => {
+              // e.poi 里可能是 AMap.LngLat 实例 / 对象 / 数组，做兼容处理
+              const poi = e && e.poi ? e.poi : null;
+              let loc = poi && (poi.location || poi.lnglat) || e && (e.location || e.lnglat) || null;
+              let foundLng = null;
+              let foundLat = null;
+              if (loc) {
+                if (typeof loc.getLng === 'function' && typeof loc.getLat === 'function') {
+                  // AMap.LngLat 实例
+                  foundLng = Number(loc.getLng());
+                  foundLat = Number(loc.getLat());
+                } else if (typeof loc.lng === 'number' && typeof loc.lat === 'number') {
+                  foundLng = Number(loc.lng);
+                  foundLat = Number(loc.lat);
+                } else if (Array.isArray(loc)) {
+                  foundLng = Number(loc[0]);
+                  foundLat = Number(loc[1]);
+                }
+              }
+              if (foundLng != null && foundLat != null && !Number.isNaN(foundLng) && !Number.isNaN(foundLat)) {
                 setLng(foundLng);
                 setLat(foundLat);
                 map.setCenter([foundLng, foundLat]);
@@ -109,86 +166,155 @@ const AMap = ({
                     map
                   });
                 }
+              } else {
+                // 兜底：用 placeSearch 搜索 name（如果有）
+                const name = poi && (poi.name || poi.address) || e && (e.info || e.name);
+                if (name && placeSearchRef.current && placeSearchRef.current.search) {
+                  placeSearchRef.current.search(name, (status, result) => {
+                    // placeSearch 回调再处理，这里保持原有逻辑或按需增强
+                    if (status === 'complete' && result && result.poiList && result.poiList.pois && result.poiList.pois.length > 0) {
+                      const p = result.poiList.pois[0];
+                      const loc2 = p.location || p.lnglat;
+                      let x = null,
+                        y = null;
+                      if (loc2) {
+                        if (typeof loc2.getLng === 'function') {
+                          x = Number(loc2.getLng());
+                          y = Number(loc2.getLat());
+                        } else if (typeof loc2.lng === 'number') {
+                          x = Number(loc2.lng);
+                          y = Number(loc2.lat);
+                        } else if (Array.isArray(loc2)) {
+                          x = Number(loc2[0]);
+                          y = Number(loc2[1]);
+                        }
+                      }
+                      if (!Number.isNaN(x) && !Number.isNaN(y)) {
+                        setLng(x);
+                        setLat(y);
+                        map.setCenter([x, y]);
+                        if (markerRef.current) markerRef.current.setPosition([x, y]);else markerRef.current = new window.AMap.Marker({
+                          position: [x, y],
+                          map
+                        });
+                      }
+                    }
+                  });
+                }
               }
-            }
-          });
-        });
-      } catch (e) {}
+            });
+          } catch (e) {
+            console.warn('AutoComplete / PlaceSearch init failed', e);
+          }
 
-      // 地图点击选点
-      map.on && map.on('click', e => {
-        const {
-          lng: clickLng,
-          lat: clickLat
-        } = e.lnglat || {};
-        if (clickLng == null || clickLat == null) return;
-        setLng(clickLng);
-        setLat(clickLat);
-        if (markerRef.current) {
-          markerRef.current.setPosition([clickLng, clickLat]);
-        } else {
-          markerRef.current = new window.AMap.Marker({
-            position: [clickLng, clickLat],
-            map
-          });
-        }
-      });
-    });
+          // 点击选点
+          try {
+            map.on && map.on('click', e => {
+              const lnglat = e && e.lnglat;
+              if (!lnglat) return;
+              let clickLng = null;
+              let clickLat = null;
+              if (typeof lnglat.getLng === 'function') {
+                clickLng = Number(lnglat.getLng());
+                clickLat = Number(lnglat.getLat());
+              } else {
+                clickLng = Number(lnglat.lng || Array.isArray(lnglat) && lnglat[0]);
+                clickLat = Number(lnglat.lat || Array.isArray(lnglat) && lnglat[1]);
+              }
+              if (Number.isNaN(clickLng) || Number.isNaN(clickLat)) return;
+              setLng(clickLng);
+              setLat(clickLat);
+              if (markerRef.current) {
+                markerRef.current.setPosition([clickLng, clickLat]);
+              } else {
+                markerRef.current = new window.AMap.Marker({
+                  position: [clickLng, clickLat],
+                  map
+                });
+              }
+            });
+          } catch (e) {
+            console.warn('map.on click failed', e);
+          }
+        });
+      } catch (err) {
+        console.error('AMap init error', err);
+      }
+    }
+    init();
 
     // cleanup
     return () => {
+      mounted = false;
       try {
         if (mapRef.current) {
           mapRef.current.destroy();
           mapRef.current = null;
         }
-      } catch (e) {}
+      } catch (e) {
+        // ignore
+      }
       markerRef.current = null;
       autoRef.current = null;
       placeSearchRef.current = null;
     };
   }, [propLng, propLat]);
 
-  /** 重置地图 */
+  // 重置、确认等操作（同样做 number guard）
   const onResetMap = useCallback(() => {
     const map = mapRef.current;
     if (!map) return;
-    setLng(_A_MAP_DEFAULT_POINT_.lng);
-    setLat(_A_MAP_DEFAULT_POINT_.lat);
-    map.setCenter([_A_MAP_DEFAULT_POINT_.lng, _A_MAP_DEFAULT_POINT_.lat]);
-    if (markerRef.current) {
-      markerRef.current.setPosition([_A_MAP_DEFAULT_POINT_.lng, _A_MAP_DEFAULT_POINT_.lat]);
-    } else {
-      markerRef.current = new window.AMap.Marker({
-        position: [_A_MAP_DEFAULT_POINT_.lng, _A_MAP_DEFAULT_POINT_.lat],
-        map
-      });
+    const x = Number(_A_MAP_DEFAULT_POINT_.lng);
+    const y = Number(_A_MAP_DEFAULT_POINT_.lat);
+    setLng(x);
+    setLat(y);
+    try {
+      map.setCenter([x, y]);
+      if (markerRef.current) {
+        markerRef.current.setPosition([x, y]);
+      } else {
+        markerRef.current = new window.AMap.Marker({
+          position: [x, y],
+          map
+        });
+      }
+    } catch (e) {
+      console.warn('reset map failed', e);
     }
   }, []);
-
-  /** 确认操作（逆地理编码） */
   const handleOk = useCallback(() => {
     if (!mapRef.current) return;
-    // 确保 Geocoder 可用
+    // 确保 lng/lat 是 number
+    const x = Number(lng);
+    const y = Number(lat);
+    if (Number.isNaN(x) || Number.isNaN(y)) {
+      onOk && onOk({
+        lng,
+        lat,
+        comp: undefined,
+        compText: undefined
+      });
+      return;
+    }
     window.AMap.plugin('AMap.Geocoder', () => {
       try {
         const geocoder = new window.AMap.Geocoder();
-        geocoder.getAddress([lng, lat], (status, result) => {
+        geocoder.getAddress([x, y], (status, result) => {
           let comp;
           if (status === 'complete' && result && result.regeocode) {
             comp = result.regeocode.addressComponent;
           }
           onOk && onOk({
-            lng,
-            lat,
+            lng: x,
+            lat: y,
             comp,
             compText: comp && [comp.province, comp.city, comp.district, comp.township, comp.street, comp.streetNumber].filter(Boolean).join('') || undefined
           });
         });
       } catch (e) {
         onOk && onOk({
-          lng,
-          lat,
+          lng: x,
+          lat: y,
           comp: undefined,
           compText: undefined
         });
@@ -242,5 +368,4 @@ const AMap = ({
     status: "error",
     title: "\u52A0\u8F7D\u5730\u56FE\u5931\u8D25\uFF0C\u7F3A\u5C11\u5FC5\u8981\u7684\u6587\u4EF6\uFF01"
   }));
-};
-export default AMap;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cqsjjb/jjb-react-admin-component",
-  "version": "3.3.0-beta.3",
+  "version": "3.3.0-beta.4",
   "description": "jjb-react-admin-组件库@new",
   "main": "index.js",
   "author": "jjb-front-team",