zy-react-library 1.1.0 → 1.1.2

package/components/Map/MapSelector.js

@@ -1,254 +1,280 @@
-import { Button, Col, Form, Input, Modal, Row, Select, Spin } from "antd";
-import { useEffect, useRef, useState } from "react";
-import { dynamicLoadJs } from "../../utils";
-
-/**
- * 定位组件弹窗
- */
-const MapSelector = (props) => {
-  const {
-    visible,
-    onClose,
-    longitude,
-    latitude,
-    onConfirm,
-    area = "",
-    showArea = false,
-    disable = false,
-  } = props;
-
-  const mapContainerRef = useRef(null);
-  const mapInstanceRef = useRef(null);
-  const local = useRef(null);
-  const [loading, setLoading] = useState(false);
-  const [currentLongitude, setCurrentLongitude] = useState(longitude || "");
-  const [currentLatitude, setCurrentLatitude] = useState(latitude || "");
-  const [localSearch, setLocalSearch] = useState("");
-  const [currentArea, setCurrentArea] = useState("");
-
-  // 当外部经纬度变化时，更新内部状态
-  useEffect(() => {
-    setCurrentLongitude(longitude || "");
-    setCurrentLatitude(latitude || "");
-    setCurrentArea(area || "");
-  }, [longitude, latitude, area]);
-
-  // 初始化地图
-  const initMap = async () => {
-    if (!window.BMapGL) {
-      await dynamicLoadJs("https://api.map.baidu.com/api?v=1.0&type=webgl&ak=OElqFYoKiAH8KFtph8ftLKF5NlNrbCUr&callback=initialize");
-    }
-
-    setLoading(true);
-
-    // 确保DOM已经渲染
-    await new Promise(resolve => setTimeout(resolve, 100));
-
-    if (mapContainerRef.current) {
-      // 只有在没有地图实例时才创建新地图
-      if (!mapInstanceRef.current) {
-        const map = new window.BMapGL.Map(mapContainerRef.current);
-        mapInstanceRef.current = map;
-
-        map.centerAndZoom(
-          new window.BMapGL.Point(
-            longitude || "119.69457721306945",
-            latitude || "39.940504336846665",
-          ),
-          16,
-        );
-
-        map.enableScrollWheelZoom(true);
-
-        // 如果有初始坐标，添加标记
-        if (longitude && latitude) {
-          const point = new window.BMapGL.Point(longitude, latitude);
-          const marker = new window.BMapGL.Marker(point);
-          map.addOverlay(marker);
-        }
-
-        // 添加点击事件
-        if (!disable) {
-          map.addEventListener("click", (event) => {
-            map.clearOverlays();
-            const point = new window.BMapGL.Point(event.latlng.lng, event.latlng.lat);
-            const marker = new window.BMapGL.Marker(point);
-            map.addOverlay(marker);
-            setCurrentLatitude(event.latlng.lat);
-            setCurrentLongitude(event.latlng.lng);
-          });
-        }
-      }
-
-      setLoading(false);
-    }
-  };
-
-  // 搜索功能
-  const handleLocalSearch = () => {
-    if (localSearch && mapInstanceRef.current) {
-      local.current = new window.BMapGL.LocalSearch(mapInstanceRef.current, {
-        renderOptions: { map: mapInstanceRef.current },
-      });
-      local.current.search(localSearch);
-    }
-  };
-
-  // 清空
-  const handleLocalClear = () => {
-    setLocalSearch("");
-    if (mapInstanceRef.current) {
-      local.current.search("");
-    }
-  };
-
-  // 关闭弹窗
-  const handleClose = () => {
-    setLocalSearch("");
-    if (onClose)
-      onClose();
-  };
-
-  // 确认选择
-  const handleConfirm = () => {
-    if (onConfirm) {
-      onConfirm(currentLongitude, currentLatitude, { area: currentArea });
-    }
-    handleClose();
-  };
-
-  // 监听visible变化
-  useEffect(() => {
-    let initTimer;
-
-    if (visible) {
-      // 延迟初始化地图，确保DOM完全渲染
-      initTimer = setTimeout(() => {
-        initMap();
-      }, 100);
-    }
-
-    return () => {
-      if (initTimer) {
-        clearTimeout(initTimer);
-      }
-    };
-  }, [visible]);
-
-  const handleAfterClose = () => {
-    if (mapInstanceRef.current) {
-      try {
-        mapInstanceRef.current.clearOverlays();
-        mapInstanceRef.current.destroy();
-        mapInstanceRef.current = null;
-      }
-      catch (e) {
-        console.warn("Error destroying map on unmount:", e);
-      }
-      mapInstanceRef.current = null;
-    }
-  };
-
-  // 组件卸载时清理地图
-  useEffect(() => {
-    return () => {
-      handleAfterClose();
-    };
-  }, []);
-
-  return (
-    <Modal
-      open={visible}
-      title="坐标"
-      onCancel={handleClose}
-      width={1000}
-      destroyOnHidden={false}
-      maskClosable={false}
-      afterClose={handleAfterClose}
-      footer={[
-        <Button key="back" onClick={handleClose}>
-          取消
-        </Button>,
-        !disable && (
-          <Button key="submit" type="primary" onClick={handleConfirm}>
-            确定
-          </Button>
-        ),
-      ]}
-    >
-      <Form labelAlign="right" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
-        {
-          showArea && (
-            <Row gutter={24}>
-              <Col span={12}>
-                <Form.Item label="所属区域">
-                  <Select value={currentArea} onChange={e => setCurrentArea(e)} allowClear>
-                    <Select.Option value="1">东港区</Select.Option>
-                    <Select.Option value="2">西港区</Select.Option>
-                  </Select>
-                </Form.Item>
-              </Col>
-            </Row>
-          )
-        }
-        {
-          !disable && (
-            <Row gutter={24}>
-              <Col span={12}>
-                <Form.Item label="关键字搜索">
-                  <Input value={localSearch} onChange={e => setLocalSearch(e.target.value)} allowClear />
-                </Form.Item>
-              </Col>
-              <Col span={12}>
-                <Form.Item label=" " colon={false} style={{ textAlign: "right" }}>
-                  <Button type="primary" onClick={handleLocalSearch}>
-                    搜索
-                  </Button>
-                  <Button onClick={handleLocalClear} style={{ marginLeft: 8 }}>
-                    重置
-                  </Button>
-                </Form.Item>
-              </Col>
-            </Row>
-          )
-        }
-        <Row gutter={24}>
-          <Col span={12}>
-            <Form.Item label="经度">
-              <Input disabled value={currentLongitude} />
-            </Form.Item>
-          </Col>
-          <Col span={12}>
-            <Form.Item label="纬度">
-              <Input disabled value={currentLatitude} />
-            </Form.Item>
-          </Col>
-        </Row>
-      </Form>
-      <div
-        ref={mapContainerRef}
-        style={{ width: "100%", height: "500px", position: "relative" }}
-      >
-        <Spin size="large" tip="地图正在加载中..." spinning={loading}>
-          <div style={{
-            position: "absolute",
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            backgroundColor: "rgba(0, 0, 0, 0.5)",
-            zIndex: 1000,
-          }}
-          />
-        </Spin>
-      </div>
-    </Modal>
-  );
-};
-
-MapSelector.displayName = "MapSelector";
-
-export default MapSelector;
+import { Modal, Form, Row, Col, Select, Input, Button, Spin } from 'antd';
+import { useRef, useState, useEffect } from 'react';
+import { dynamicLoadJs } from '../../utils/index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const MapSelector = props => {
+  const {
+    visible,
+    onClose,
+    longitude,
+    latitude,
+    onConfirm,
+    area = "",
+    showArea = false,
+    disable = false
+  } = props;
+  const mapContainerRef = useRef(null);
+  const mapInstanceRef = useRef(null);
+  const local = useRef(null);
+  const [loading, setLoading] = useState(false);
+  const [currentLongitude, setCurrentLongitude] = useState(longitude || "");
+  const [currentLatitude, setCurrentLatitude] = useState(latitude || "");
+  const [localSearch, setLocalSearch] = useState("");
+  const [currentArea, setCurrentArea] = useState("");
+
+  // 当外部经纬度变化时，更新内部状态
+  useEffect(() => {
+    setCurrentLongitude(longitude || "");
+    setCurrentLatitude(latitude || "");
+    setCurrentArea(area || "");
+  }, [longitude, latitude, area]);
+
+  // 初始化地图
+  const initMap = async () => {
+    if (!window.BMapGL) {
+      if (window?.base?.loadDynamicResource) {
+        await window.base.loadDynamicResource({
+          url: "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=OElqFYoKiAH8KFtph8ftLKF5NlNrbCUr&callback=initialize",
+          type: "script"
+        });
+      } else {
+        await dynamicLoadJs("https://api.map.baidu.com/api?v=1.0&type=webgl&ak=OElqFYoKiAH8KFtph8ftLKF5NlNrbCUr&callback=initialize");
+      }
+    }
+    setLoading(true);
+
+    // 确保DOM已经渲染
+    await new Promise(resolve => setTimeout(resolve, 100));
+    if (mapContainerRef.current) {
+      // 只有在没有地图实例时才创建新地图
+      if (!mapInstanceRef.current) {
+        const map = new window.BMapGL.Map(mapContainerRef.current);
+        mapInstanceRef.current = map;
+        map.centerAndZoom(new window.BMapGL.Point(longitude || "119.69457721306945", latitude || "39.940504336846665"), 16);
+        map.enableScrollWheelZoom(true);
+
+        // 如果有初始坐标，添加标记
+        if (longitude && latitude) {
+          const point = new window.BMapGL.Point(longitude, latitude);
+          const marker = new window.BMapGL.Marker(point);
+          map.addOverlay(marker);
+        }
+
+        // 添加点击事件
+        if (!disable) {
+          map.addEventListener("click", event => {
+            map.clearOverlays();
+            const point = new window.BMapGL.Point(event.latlng.lng, event.latlng.lat);
+            const marker = new window.BMapGL.Marker(point);
+            map.addOverlay(marker);
+            setCurrentLatitude(event.latlng.lat);
+            setCurrentLongitude(event.latlng.lng);
+          });
+        }
+      }
+      setLoading(false);
+    }
+  };
+
+  // 搜索功能
+  const handleLocalSearch = () => {
+    if (localSearch && mapInstanceRef.current) {
+      local.current = new window.BMapGL.LocalSearch(mapInstanceRef.current, {
+        renderOptions: {
+          map: mapInstanceRef.current
+        }
+      });
+      local.current.search(localSearch);
+    }
+  };
+
+  // 清空
+  const handleLocalClear = () => {
+    setLocalSearch("");
+    if (mapInstanceRef.current) {
+      local.current.search("");
+    }
+  };
+
+  // 关闭弹窗
+  const handleClose = () => {
+    setLocalSearch("");
+    if (onClose) onClose();
+  };
+
+  // 确认选择
+  const handleConfirm = () => {
+    if (onConfirm) {
+      onConfirm(currentLongitude, currentLatitude, {
+        area: currentArea
+      });
+    }
+    handleClose();
+  };
+
+  // 监听visible变化
+  useEffect(() => {
+    let initTimer;
+    if (visible) {
+      // 延迟初始化地图，确保DOM完全渲染
+      initTimer = setTimeout(() => {
+        initMap();
+      }, 100);
+    }
+    return () => {
+      if (initTimer) {
+        clearTimeout(initTimer);
+      }
+    };
+  }, [visible]);
+  const handleAfterClose = () => {
+    if (mapInstanceRef.current) {
+      try {
+        mapInstanceRef.current.clearOverlays();
+        mapInstanceRef.current.destroy();
+        mapInstanceRef.current = null;
+      } catch (e) {
+        console.warn("Error destroying map on unmount:", e);
+      }
+      mapInstanceRef.current = null;
+    }
+  };
+
+  // 组件卸载时清理地图
+  useEffect(() => {
+    return () => {
+      handleAfterClose();
+    };
+  }, []);
+  return /*#__PURE__*/jsxs(Modal, {
+    open: visible,
+    title: "\u5750\u6807",
+    onCancel: handleClose,
+    width: 1000,
+    destroyOnHidden: false,
+    maskClosable: false,
+    afterClose: handleAfterClose,
+    footer: [/*#__PURE__*/jsx(Button, {
+      onClick: handleClose,
+      children: "\u53D6\u6D88"
+    }, "back"), !disable && /*#__PURE__*/jsx(Button, {
+      type: "primary",
+      onClick: handleConfirm,
+      children: "\u786E\u5B9A"
+    }, "submit")],
+    children: [/*#__PURE__*/jsxs(Form, {
+      labelAlign: "right",
+      labelCol: {
+        span: 6
+      },
+      wrapperCol: {
+        span: 18
+      },
+      children: [showArea && /*#__PURE__*/jsx(Row, {
+        gutter: 24,
+        children: /*#__PURE__*/jsx(Col, {
+          span: 12,
+          children: /*#__PURE__*/jsx(Form.Item, {
+            label: "\u6240\u5C5E\u533A\u57DF",
+            children: /*#__PURE__*/jsxs(Select, {
+              value: currentArea,
+              onChange: e => setCurrentArea(e),
+              allowClear: true,
+              children: [/*#__PURE__*/jsx(Select.Option, {
+                value: "1",
+                children: "\u4E1C\u6E2F\u533A"
+              }), /*#__PURE__*/jsx(Select.Option, {
+                value: "2",
+                children: "\u897F\u6E2F\u533A"
+              })]
+            })
+          })
+        })
+      }), !disable && /*#__PURE__*/jsxs(Row, {
+        gutter: 24,
+        children: [/*#__PURE__*/jsx(Col, {
+          span: 12,
+          children: /*#__PURE__*/jsx(Form.Item, {
+            label: "\u5173\u952E\u5B57\u641C\u7D22",
+            children: /*#__PURE__*/jsx(Input, {
+              value: localSearch,
+              onChange: e => setLocalSearch(e.target.value),
+              allowClear: true
+            })
+          })
+        }), /*#__PURE__*/jsx(Col, {
+          span: 12,
+          children: /*#__PURE__*/jsxs(Form.Item, {
+            label: " ",
+            colon: false,
+            style: {
+              textAlign: "right"
+            },
+            children: [/*#__PURE__*/jsx(Button, {
+              type: "primary",
+              onClick: handleLocalSearch,
+              children: "\u641C\u7D22"
+            }), /*#__PURE__*/jsx(Button, {
+              onClick: handleLocalClear,
+              style: {
+                marginLeft: 8
+              },
+              children: "\u91CD\u7F6E"
+            })]
+          })
+        })]
+      }), /*#__PURE__*/jsxs(Row, {
+        gutter: 24,
+        children: [/*#__PURE__*/jsx(Col, {
+          span: 12,
+          children: /*#__PURE__*/jsx(Form.Item, {
+            label: "\u7ECF\u5EA6",
+            children: /*#__PURE__*/jsx(Input, {
+              disabled: true,
+              value: currentLongitude
+            })
+          })
+        }), /*#__PURE__*/jsx(Col, {
+          span: 12,
+          children: /*#__PURE__*/jsx(Form.Item, {
+            label: "\u7EAC\u5EA6",
+            children: /*#__PURE__*/jsx(Input, {
+              disabled: true,
+              value: currentLatitude
+            })
+          })
+        })]
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      ref: mapContainerRef,
+      style: {
+        width: "100%",
+        height: "500px",
+        position: "relative"
+      },
+      children: /*#__PURE__*/jsx(Spin, {
+        size: "large",
+        tip: "\u5730\u56FE\u6B63\u5728\u52A0\u8F7D\u4E2D...",
+        spinning: loading,
+        children: /*#__PURE__*/jsx("div", {
+          style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+            zIndex: 1000
+          }
+        })
+      })
+    })]
+  });
+};
+MapSelector.displayName = "MapSelector";
+
+export { MapSelector as default };