优化MapSelector

components/Map/MapSelector.d.ts

@@ -22,6 +22,8 @@ export interface MapSelectorProps {
   area?: string;
   /** 是否显示所属区域 */
   showArea?: boolean;
+  /** 是否只查看 */
+  disable?: boolean;
   /** 确认选择回调 */
   onConfirm?: (longitude: number | string, latitude: number | string, extra: { area: string }) => void;
 }

components/Map/MapSelector.js

@@ -13,6 +13,7 @@ const MapSelector = (props) => {
     onConfirm,
     area = "",
     showArea = false,
+    disable = false,
   } = props;
 
   const mapContainerRef = useRef(null);
@@ -66,14 +67,16 @@ const MapSelector = (props) => {
         }
 
         // 添加点击事件
-        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);
-        });
+        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);
@@ -149,10 +152,19 @@ const MapSelector = (props) => {
       open={visible}
       title="坐标"
       onCancel={handleClose}
-      onOk={handleConfirm}
       width={1000}
       destroyOnHidden={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 }}>
         {
@@ -169,20 +181,24 @@ const MapSelector = (props) => {
             </Row>
           )
         }
-        <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}>
-              <Button type="primary" onClick={handleLocalSearch}>
-                搜索
-              </Button>
-            </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}>
+                  <Button type="primary" onClick={handleLocalSearch}>
+                    搜索
+                  </Button>
+                </Form.Item>
+              </Col>
+            </Row>
+          )
+        }
         <Row gutter={24}>
           <Col span={12}>
             <Form.Item label="经度">