zy-react-library/components/Map/index.js

import { Button, Col, Form, Input, Row } from "antd";
import { useState } from "react";
import MapSelector from "./MapSelector";

const Map = (props) => {
  const {
    longitudeProps = "longitude",
    latitudeProps = "latitude",
    onConfirm,
    required = true,
  } = props;

  const form = Form.useFormInstance();
  const [mapVisible, setMapVisible] = useState(false);
  const [currentLongitude, setCurrentLongitude] = useState(form.getFieldValue(longitudeProps) || "");
  const [currentLatitude, setCurrentLatitude] = useState(form.getFieldValue(latitudeProps) || "");

  const handleMapConfirm = (longitudeValue, latitudeValue) => {
    setCurrentLongitude(longitudeValue);
    setCurrentLatitude(latitudeValue);
    form.setFieldsValue({
      [longitudeProps]: longitudeValue,
      [latitudeProps]: latitudeValue,
    });
    onConfirm?.(longitudeValue, latitudeValue);
    setMapVisible(false);
  };

  return (
    <>
      <Row gutter={24}>
        <Col span={12}>
          <Form.Item label="经度" name={longitudeProps} style={{ flex: 1 }} rules={[{ required, message: "请选择经度" }]}>
            <Input disabled />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="纬度" name={latitudeProps} style={{ flex: 1 }} rules={[{ required, message: "请选择纬度" }]}>
            <div style={{ display: "flex", gap: 10 }}>
              <Input disabled />
              <Button type="primary" onClick={() => setMapVisible(true)}>
                点击定位
              </Button>
            </div>
          </Form.Item>
        </Col>
      </Row>
      <MapSelector
        visible={mapVisible}
        onClose={() => setMapVisible(false)}
        longitude={currentLongitude}
        latitude={currentLatitude}
        onConfirm={handleMapConfirm}
      />
    </>
  );
};

export default Map;