diff --git a/components/Map/MapSelector.d.ts b/components/Map/MapSelector.d.ts index d79b9b7..e40da3e 100644 --- a/components/Map/MapSelector.d.ts +++ b/components/Map/MapSelector.d.ts @@ -1,5 +1,14 @@ import type { FC } from "react"; +export interface OnConfirmParams { + /** 经度值 */ + longitude: number | string; + /** 纬度值 */ + latitude: number | string; + /** 额外参数 */ + extra?: { area: string }; +} + export interface MapSelectorProps { /** 是否显示弹窗 */ visible: boolean; @@ -9,10 +18,17 @@ export interface MapSelectorProps { longitude?: number | string; /** 纬度值 */ latitude?: number | string; + /** 所属区域 */ + area?: string; + /** 是否显示所属区域 */ + showArea?: boolean; /** 确认选择回调 */ - onConfirm?: (longitude: number | string, latitude: number | string) => void; + onConfirm?: (longitude: number | string, latitude: number | string, extra: { area: string }) => void; } +/** + * 定位组件弹窗 + */ declare const MapSelector: FC; export default MapSelector; diff --git a/components/Map/MapSelector.js b/components/Map/MapSelector.js index 385215f..2639f8d 100644 --- a/components/Map/MapSelector.js +++ b/components/Map/MapSelector.js @@ -1,4 +1,4 @@ -import { Button, Col, Form, Input, Modal, Row, Spin } from "antd"; +import { Button, Col, Form, Input, Modal, Row, Select, Spin } from "antd"; import { useEffect, useRef, useState } from "react"; /** @@ -11,6 +11,8 @@ const MapSelector = (props) => { longitude, latitude, onConfirm, + area = "", + showArea = false, } = props; const mapContainerRef = useRef(null); @@ -19,12 +21,14 @@ const MapSelector = (props) => { const [currentLongitude, setCurrentLongitude] = useState(longitude || ""); const [currentLatitude, setCurrentLatitude] = useState(latitude || ""); const [localSearch, setLocalSearch] = useState(""); + const [currentArea, setCurrentArea] = useState(""); // 当外部经纬度变化时,更新内部状态 useEffect(() => { setCurrentLongitude(longitude || ""); setCurrentLatitude(latitude || ""); - }, [longitude, latitude]); + setCurrentArea(area || ""); + }, [longitude, latitude, area]); // 初始化地图 const initMap = async () => { @@ -96,7 +100,7 @@ const MapSelector = (props) => { // 确认选择 const handleConfirm = () => { if (onConfirm) { - onConfirm(currentLongitude, currentLatitude); + onConfirm(currentLongitude, currentLatitude, { area: currentArea }); } handleClose(); }; @@ -146,19 +150,29 @@ const MapSelector = (props) => { title="坐标" onCancel={handleClose} onOk={handleConfirm} - width={800} + width={1000} destroyOnHidden={false} afterClose={handleAfterClose} >
+ { + showArea && ( + + + + + + + + ) + } - setLocalSearch(e.target.value)} - allowClear - /> + setLocalSearch(e.target.value)} allowClear /> diff --git a/components/Map/index.d.ts b/components/Map/index.d.ts index 4202142..38c3531 100644 --- a/components/Map/index.d.ts +++ b/components/Map/index.d.ts @@ -5,12 +5,19 @@ export interface MapProps { longitudeProps?: string; /** 纬度属性名,默认 latitude */ latitudeProps?: string; - /** 经纬度变化回调 */ - onConfirm?: (longitude: number | string, latitude: number | string) => void; /** 经纬度是否必填,默认 true */ required?: boolean; + /** 所属区域 */ + area?: string; + /** 是否显示所属区域 */ + showArea?: boolean; + /** 确认选择回调 */ + onConfirm?: (longitude: number | string, latitude: number | string, extra: { area: string }) => void; } +/** + * 定位组件 + */ declare const Map: FC; export default Map; diff --git a/components/Map/index.js b/components/Map/index.js index 964f6e7..e7830f4 100644 --- a/components/Map/index.js +++ b/components/Map/index.js @@ -11,6 +11,8 @@ const Map = (props) => { latitudeProps = "latitude", onConfirm, required = true, + area = "", + showArea = false, } = props; const form = Form.useFormInstance(); @@ -18,14 +20,14 @@ const Map = (props) => { const [currentLongitude, setCurrentLongitude] = useState(form.getFieldValue(longitudeProps) || ""); const [currentLatitude, setCurrentLatitude] = useState(form.getFieldValue(latitudeProps) || ""); - const handleMapConfirm = (longitudeValue, latitudeValue) => { + const handleMapConfirm = (longitudeValue, latitudeValue, extra) => { setCurrentLongitude(longitudeValue); setCurrentLatitude(latitudeValue); form.setFieldsValue({ [longitudeProps]: longitudeValue, [latitudeProps]: latitudeValue, }); - onConfirm?.(longitudeValue, latitudeValue); + onConfirm?.(longitudeValue, latitudeValue, extra); setMapVisible(false); }; @@ -44,7 +46,7 @@ const Map = (props) => { @@ -55,6 +57,8 @@ const Map = (props) => { onClose={() => setMapVisible(false)} longitude={currentLongitude} latitude={currentLatitude} + area={area} + showArea={showArea} onConfirm={handleMapConfirm} />