@hzab/form-render 1.6.17 → 1.6.19

package/src/components/LocationPicker/components/ModalContent/index.tsx

@@ -1,387 +1,387 @@
-import { useEffect, useMemo, useRef, useState } from "react";
-import { Spin, message } from "antd";
-import { observer } from "@formily/react";
-
-import PickerInfo from "../PickerInfo";
-import AMapCom from "../../Map/AMap";
-import Notice from "../Notice";
-import MapSearch from "../MapSearch";
-
-import { getCurrentPosition } from "../../../../common/location-utils";
-import { MapUtils } from "../../Map/AMap/common/utils";
-import { getAddress } from "../../servers";
-import { getPropsValue } from "../../common/utils";
-
-import { positionIcon as positionIconDef, resetIcon as resetIconDef } from "../../assets/svg-icon";
-
-import "./index.less";
-
-export const ModalContent = observer((props: any) => {
-  const {
-    mode,
-    element = "Polypoint",
-    /**
-     * 选择器和地图的布局
-     * 水平 输入框在前 hor
-     * 垂直 输入框在前 ver
-     * 水平 输入框在后 hor-reverse
-     * 垂直 输入框在后 ver-reverse
-     */
-    layout = "ver",
-    // 是否允许搜索
-    hasSearch = true,
-    /**
-     * 打开地图时是否根据经纬度自动修正已填的地址
-     */
-    isAutoFixAddr = false,
-    lonKey = "longitude",
-    latKey = "latitude",
-    addrKey = "address",
-    pointsKey = "points",
-    rangeKey = "range",
-    value,
-    // 搜索框是否自动搜索
-    isAutoSearch = true,
-    //
-    visible,
-    visibleKey,
-    defaultLocation = {},
-    disabled,
-    readOnly,
-    icons,
-    markerIconConf,
-    getCurPositionConf,
-    init,
-  } = props;
-
-  const mapUtilsRef = useRef<MapUtils>();
-
-  // 数据格式转为内部格式，方便存取
-  const formatVal = useMemo(
-    () =>
-      getPropsValue(value, {
-        lonKey,
-        latKey,
-        addrKey,
-        pointsKey,
-        rangeKey
-      }),
-    [lonKey, latKey, addrKey, pointsKey,rangeKey, value, value?.[rangeKey], value?.[pointsKey], value?.[lonKey], value?.[latKey], value?.[addrKey]],
-  );
-
-  const [loading, setLoading] = useState(props.loading || false);
-  const [addrLoading, setAddrLoading] = useState(false);
-  // 地图选点组件选中的值
-  const [pickInfo, setPickInfo] = useState(formatVal);
-  const pickerInfoRef = useRef(pickInfo);
-  const formatValRef = useRef(formatVal);
-
-  const isShowMode = mode === "show";
-
-  useEffect(() => {
-    setLoading(props.loading);
-  }, [props.loading]);
-
-  useEffect(() => {
-    if (isShowMode) {
-      // mode === 'show' 的情况
-      let _lon = formatVal.lon;
-      let _lat = formatVal.lat;
-      let _points = formatVal.points;
-      formatValRef.current = {
-        ...formatVal,
-      };
-      if (_lon && _lat && _lon !== pickInfo.lon && _lat !== pickInfo.lat) {
-        // 解决关闭弹窗之后点位不居中的问题
-        if (window.AMap && window.AMap.LngLat) {
-          setMapCenter(_lon, _lat);
-          if (element === "Polypoint") {
-            setPickPoint(_lon, _lat, { isAutoFixAddr: false, addr: formatVal.addr });
-          } else {
-            setDrawEditor(_points || []);
-          }
-        } else {
-          // 解决刷新页面 AMap 未加载导致的异常问题
-          window._AMapLoaderTemp?.promise?.then(() => {
-            setMapCenter(_lon, _lat);
-            if (element === "Polypoint") {
-              setPickPoint(_lon, _lat, { isAutoFixAddr: false, addr: formatVal.addr });
-            } else {
-              setDrawEditor(_points || []);
-            }
-          });
-        }
-      }
-    } else if (visibleKey) {
-      // 处理弹窗展示数据回显逻辑
-      let _lon = defaultLocation.lon;
-      let _lat = defaultLocation.lat;
-      let _points = defaultLocation.points || [];
-      let addr = defaultLocation.addr;
-      if (formatVal.lon && formatVal.lat) {
-        _lon = formatVal.lon;
-        _lat = formatVal.lat;
-        addr = formatVal.addr;
-      }
-      // 解决关闭弹窗之后点位不居中的问题
-      if (window.AMap && window.AMap.LngLat) {
-        setMapCenter(_lon, _lat);
-      } else {
-        // 解决刷新页面 AMap 未加载导致的异常问题
-        window._AMapLoaderTemp?.promise?.then(() => {
-          setMapCenter(_lon, _lat);
-        });
-      }
-      if (_lon && _lat && _lon !== pickerInfoRef.current?.lon && _lat !== pickerInfoRef.current?.lat) {
-        if (element === "Polypoint") {
-          setPickPoint(_lon, _lat, { isAutoFixAddr: false, addr: addr });
-        } else {
-          setDrawEditor(_points || []);
-        }
-      }
-    }
-    init({ editDone: onMapDbClick });
-    return () => {
-      // 取消监听
-      mapUtilsRef.current?.off("dblclick", onMapDbClick);
-      mapUtilsRef.current?.off("click", onClickMap);
-    };
-  }, []);
-
-  async function onMapDbClick() {
-    if (element !== "Polypoint") {
-      const graphical = mapUtilsRef.current.polyEditor[`${element}Editor`].getTarget();
-      if (graphical) {
-        const points = graphical.getPath().map((item) => [item.lng, item.lat]);
-        const center = mapUtilsRef.current.getPolygonCenter(points);
-        const addr = await getAddr(center[0], center[1]);
-        mapUtilsRef.current.polyEditor[`${element}Editor`].close();
-        mapUtilsRef.current.polyEditor[`${element}Editor`].setTarget();
-        props.setPickInfo &&
-          props.setPickInfo({
-            points,
-            addr,
-            lon: center[0],
-            lat: center[1],
-          });
-        setPickInfo({
-          points,
-          addr,
-          lon: center[0],
-          lat: center[1],
-          range: 0
-        });
-      }
-    }
-  }
-
-  function mapInit({ map, mapUtils }) {
-    mapUtilsRef.current = mapUtils;
-    mapUtilsRef.current.on("dblclick", onMapDbClick);
-    let _lon = defaultLocation.lon;
-    let _lat = defaultLocation.lat;
-    let _points = defaultLocation.points;
-    let _range = defaultLocation.range
-    if (pickInfo.lon && pickInfo.lat) {
-      _lon = pickInfo.lon;
-      _lat = pickInfo.lat;
-      _points = pickInfo.points;
-      _range = pickInfo.range
-    } else if (formatValRef.current?.lon && formatValRef.current?.lat) {
-      _lon = formatValRef.current?.lon;
-      _lat = formatValRef.current?.lat;
-      _points = formatValRef.current?.points;
-      _range = formatValRef.current?.range;
-    }
-
-    setMapCenter(_lon, _lat);
-
-    setLoading(props.loading || false);
-    if (!(disabled || readOnly)) {
-      if (element === "Polypoint") {
-        mapUtilsRef.current?.setPickerMarker(_lon, _lat);
-        // 点击选中点位的情况
-        mapUtilsRef.current.on("click", onClickMap);
-      } else {
-        mapUtilsRef.current?.createPoly(element);
-        if (_points.length == 0) {
-          mapUtilsRef.current?.startPolygon({
-            onClick: onPolygonClick,
-            element,
-          });
-          mapUtilsRef.current.setDrawPolygon({ element });
-        }
-        setDrawEditor(_points);
-      }
-    } else {
-      // 禁用、只读情况使用 marker 展示点位
-      if (element === "Polypoint") {
-        mapUtilsRef.current?.setPickerMarker(_lon, _lat);
-        mapUtilsRef.current.setCircle(_lon, _lat, _range);
-      } else {
-        setDrawEditor(_points, true);
-      }
-    }
-  }
-
-  function onClickMap(ev) {
-    const { lng: evLon, lat: evLat } = ev.lnglat || {};
-    if (element === "Polypoint") {
-      setPickPoint(evLon, evLat, { changeCenter: true });
-    }
-  }
-
-  function setDrawEditor(_points, disabled = false) {
-    if (!mapUtilsRef.current) {
-      return;
-    }
-    mapUtilsRef.current?.createPoly(element);
-    if (_points && _points.length > 0) {
-      const graphical = mapUtilsRef.current?.setPolygon({
-        points: _points,
-        id: "setDrawEditor",
-        element,
-        onClick: !disabled && onPolygonClick,
-      });
-    }
-  }
-
-  function onPolygonClick(e) {
-    mapUtilsRef.current.setEditPolygon({ ...e.target, element });
-  }
-
-  /**
-   * 设置地图中心点
-   * @param lon
-   * @param lat
-   */
-  function setMapCenter(lon = pickInfo.lon, lat = pickInfo.lat) {
-    lon && lat && mapUtilsRef.current?.setCenter(lon, lat);
-  }
-
-  async function setPickPoint(_lon, _lat, opt?: any) {
-    const { isAutoFixAddr: _isAutoFixAddr = isAutoFixAddr || true, changeCenter, addr: _addr } = opt || {};
-    const lon = _lon || pickInfo.lon;
-    const lat = _lat || pickInfo.lat;
-    let addr = _addr;
-    mapUtilsRef.current?.setPickerMarker(_lon, _lat);
-    if (changeCenter) {
-      setMapCenter(_lon, _lat);
-    }
-
-    // 开启自动修复地址 且 opt 参数中没有地址，请求地址
-    if (_isAutoFixAddr && !addr) {
-      addr = await getAddr(lon, lat);
-    }
-    const res = { ...pickInfo, lon, lat, addr };
-    setPickInfo(res);
-    pickerInfoRef.current = res;
-    props.setPickInfo && props.setPickInfo(res);
-  }
-
-  function getAddr(_lng, _lat) {
-    return new Promise((resolve, reject) => {
-      if (!window.AMap) {
-        reject();
-        return new Error("window.AMap is not defined");
-      }
-
-      setAddrLoading(true);
-      getAddress(_lng, _lat)
-        .then((addr) => {
-          setAddrLoading(false);
-          setPickInfo((_p) => {
-            pickerInfoRef.current = { ..._p, addr };
-            return pickerInfoRef.current;
-          });
-          resolve(addr);
-        })
-        .catch((err) => {
-          reject(err);
-          message.error(err);
-          setAddrLoading(false);
-        });
-    });
-  }
-
-  function resetCenter() {
-    setMapCenter();
-  }
-
-  function getPosition() {
-    setLoading(true);
-    // 获取当前经纬度
-    getCurrentPosition(getCurPositionConf)
-      .then((res) => {
-        const { coords = {} } = res;
-        setPickPoint(coords.longitude, coords.latitude, { changeCenter: true });
-        setLoading(false);
-      })
-      .catch((e) => {
-        setLoading(false);
-        message.error("定位获取失败");
-        console.warn("Error getCurrentPosition e: ", e);
-      });
-  }
-
-  // 展示获取当前定位按钮 props.showGetPositionBtn !== false 且非禁用、只读模式
-  const showGetPositionBtn = props.showGetPositionBtn !== false && !(disabled || readOnly);
-
-  const { markerIcon, positionIcon, resetIcon } = icons || {};
-
-  return (
-    <div className={`location-picker-modal-content location-mode-${mode} location-modal-content-layout-${layout}`}>
-      <PickerInfo
-        element={element}
-        pickInfo={pickInfo}
-        setPickInfo={setPickInfo}
-        setPoint={setPickPoint}
-        addrLoading={addrLoading}
-        defaultLocation={defaultLocation}
-        disabled={disabled}
-        readOnly={element !== "Polypoint" ? true : readOnly}
-      />
-      <div className="location-picker-map-wrap">
-        <div className="location-picker-map">
-          {/* 关闭弹窗之后清除搜索内容 */}
-          {hasSearch && !disabled && !readOnly ? (
-            <MapSearch
-              key={visible}
-              setPoint={element !== "Polypoint" && (readOnly || disabled) ? setMapCenter : setPickPoint}
-              isAutoSearch={isAutoSearch}
-            />
-          ) : null}
-          <AMapCom init={mapInit} loading={loading} markerIconConf={markerIconConf} />
-          <div className="set-map-actions">
-            {/* 已选的点位居中 */}
-            <div className="actions-icon-box reset-icon-box" onClick={resetCenter}>
-              {typeof resetIcon === "string" ? (
-                <img className="reset-icon" src={resetIcon} />
-              ) : (
-                resetIcon || resetIconDef
-              )}
-            </div>
-            {/* 获取当前经纬度 */}
-            {showGetPositionBtn && element === "Polypoint" ? (
-              <div className="actions-icon-box center-icon-box" onClick={getPosition}>
-                {typeof positionIcon === "string" ? (
-                  <img className="center-icon" src={positionIcon} />
-                ) : (
-                  positionIcon || positionIconDef
-                )}
-              </div>
-            ) : null}
-          </div>
-        </div>
-        {disabled || readOnly ? null : <Notice />}
-      </div>
-      {loading && (
-        <div className="spin-loading-wrap">
-          <Spin className="spin-loading" />
-        </div>
-      )}
-    </div>
-  );
-});
-
-export default ModalContent;
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Spin, message } from "antd";
+import { observer } from "@formily/react";
+
+import PickerInfo from "../PickerInfo";
+import AMapCom from "../../Map/AMap";
+import Notice from "../Notice";
+import MapSearch from "../MapSearch";
+
+import { getCurrentPosition } from "../../../../common/location-utils";
+import { MapUtils } from "../../Map/AMap/common/utils";
+import { getAddress } from "../../servers";
+import { getPropsValue } from "../../common/utils";
+
+import { positionIcon as positionIconDef, resetIcon as resetIconDef } from "../../assets/svg-icon";
+
+import "./index.less";
+
+export const ModalContent = observer((props: any) => {
+  const {
+    mode,
+    element = "Polypoint",
+    /**
+     * 选择器和地图的布局
+     * 水平 输入框在前 hor
+     * 垂直 输入框在前 ver
+     * 水平 输入框在后 hor-reverse
+     * 垂直 输入框在后 ver-reverse
+     */
+    layout = "ver",
+    // 是否允许搜索
+    hasSearch = true,
+    /**
+     * 打开地图时是否根据经纬度自动修正已填的地址
+     */
+    isAutoFixAddr = false,
+    lonKey = "longitude",
+    latKey = "latitude",
+    addrKey = "address",
+    pointsKey = "points",
+    rangeKey = "range",
+    value,
+    // 搜索框是否自动搜索
+    isAutoSearch = true,
+    //
+    visible,
+    visibleKey,
+    defaultLocation = {},
+    disabled,
+    readOnly,
+    icons,
+    markerIconConf,
+    getCurPositionConf,
+    init,
+  } = props;
+
+  const mapUtilsRef = useRef<MapUtils>();
+
+  // 数据格式转为内部格式，方便存取
+  const formatVal = useMemo(
+    () =>
+      getPropsValue(value, {
+        lonKey,
+        latKey,
+        addrKey,
+        pointsKey,
+        rangeKey
+      }),
+    [lonKey, latKey, addrKey, pointsKey,rangeKey, value, value?.[rangeKey], value?.[pointsKey], value?.[lonKey], value?.[latKey], value?.[addrKey]],
+  );
+
+  const [loading, setLoading] = useState(props.loading || false);
+  const [addrLoading, setAddrLoading] = useState(false);
+  // 地图选点组件选中的值
+  const [pickInfo, setPickInfo] = useState(formatVal);
+  const pickerInfoRef = useRef(pickInfo);
+  const formatValRef = useRef(formatVal);
+
+  const isShowMode = mode === "show";
+
+  useEffect(() => {
+    setLoading(props.loading);
+  }, [props.loading]);
+
+  useEffect(() => {
+    if (isShowMode) {
+      // mode === 'show' 的情况
+      let _lon = formatVal.lon;
+      let _lat = formatVal.lat;
+      let _points = formatVal.points;
+      formatValRef.current = {
+        ...formatVal,
+      };
+      if (_lon && _lat && _lon !== pickInfo.lon && _lat !== pickInfo.lat) {
+        // 解决关闭弹窗之后点位不居中的问题
+        if (window.AMap && window.AMap.LngLat) {
+          setMapCenter(_lon, _lat);
+          if (element === "Polypoint") {
+            setPickPoint(_lon, _lat, { isAutoFixAddr: false, addr: formatVal.addr });
+          } else {
+            setDrawEditor(_points || []);
+          }
+        } else {
+          // 解决刷新页面 AMap 未加载导致的异常问题
+          window._AMapLoaderTemp?.promise?.then(() => {
+            setMapCenter(_lon, _lat);
+            if (element === "Polypoint") {
+              setPickPoint(_lon, _lat, { isAutoFixAddr: false, addr: formatVal.addr });
+            } else {
+              setDrawEditor(_points || []);
+            }
+          });
+        }
+      }
+    } else if (visibleKey) {
+      // 处理弹窗展示数据回显逻辑
+      let _lon = defaultLocation.lon;
+      let _lat = defaultLocation.lat;
+      let _points = defaultLocation.points || [];
+      let addr = defaultLocation.addr;
+      if (formatVal.lon && formatVal.lat) {
+        _lon = formatVal.lon;
+        _lat = formatVal.lat;
+        addr = formatVal.addr;
+      }
+      // 解决关闭弹窗之后点位不居中的问题
+      if (window.AMap && window.AMap.LngLat) {
+        setMapCenter(_lon, _lat);
+      } else {
+        // 解决刷新页面 AMap 未加载导致的异常问题
+        window._AMapLoaderTemp?.promise?.then(() => {
+          setMapCenter(_lon, _lat);
+        });
+      }
+      if (_lon && _lat && _lon !== pickerInfoRef.current?.lon && _lat !== pickerInfoRef.current?.lat) {
+        if (element === "Polypoint") {
+          setPickPoint(_lon, _lat, { isAutoFixAddr: false, addr: addr });
+        } else {
+          setDrawEditor(_points || []);
+        }
+      }
+    }
+    init({ editDone: onMapDbClick });
+    return () => {
+      // 取消监听
+      mapUtilsRef.current?.off("dblclick", onMapDbClick);
+      mapUtilsRef.current?.off("click", onClickMap);
+    };
+  }, []);
+
+  async function onMapDbClick() {
+    if (element !== "Polypoint") {
+      const graphical = mapUtilsRef.current.polyEditor[`${element}Editor`].getTarget();
+      if (graphical) {
+        const points = graphical.getPath().map((item) => [item.lng, item.lat]);
+        const center = mapUtilsRef.current.getPolygonCenter(points);
+        const addr = await getAddr(center[0], center[1]);
+        mapUtilsRef.current.polyEditor[`${element}Editor`].close();
+        mapUtilsRef.current.polyEditor[`${element}Editor`].setTarget();
+        props.setPickInfo &&
+          props.setPickInfo({
+            points,
+            addr,
+            lon: center[0],
+            lat: center[1],
+          });
+        setPickInfo({
+          points,
+          addr,
+          lon: center[0],
+          lat: center[1],
+          range: 0
+        });
+      }
+    }
+  }
+
+  function mapInit({ map, mapUtils }) {
+    mapUtilsRef.current = mapUtils;
+    mapUtilsRef.current.on("dblclick", onMapDbClick);
+    let _lon = defaultLocation.lon;
+    let _lat = defaultLocation.lat;
+    let _points = defaultLocation.points;
+    let _range = defaultLocation.range
+    if (pickInfo.lon && pickInfo.lat) {
+      _lon = pickInfo.lon;
+      _lat = pickInfo.lat;
+      _points = pickInfo.points;
+      _range = pickInfo.range
+    } else if (formatValRef.current?.lon && formatValRef.current?.lat) {
+      _lon = formatValRef.current?.lon;
+      _lat = formatValRef.current?.lat;
+      _points = formatValRef.current?.points;
+      _range = formatValRef.current?.range;
+    }
+
+    setMapCenter(_lon, _lat);
+
+    setLoading(props.loading || false);
+    if (!(disabled || readOnly)) {
+      if (element === "Polypoint") {
+        mapUtilsRef.current?.setPickerMarker(_lon, _lat);
+        // 点击选中点位的情况
+        mapUtilsRef.current.on("click", onClickMap);
+      } else {
+        mapUtilsRef.current?.createPoly(element);
+        if (_points.length == 0) {
+          mapUtilsRef.current?.startPolygon({
+            onClick: onPolygonClick,
+            element,
+          });
+          mapUtilsRef.current.setDrawPolygon({ element });
+        }
+        setDrawEditor(_points);
+      }
+    } else {
+      // 禁用、只读情况使用 marker 展示点位
+      if (element === "Polypoint") {
+        mapUtilsRef.current?.setPickerMarker(_lon, _lat);
+        mapUtilsRef.current.setCircle(_lon, _lat, _range);
+      } else {
+        setDrawEditor(_points, true);
+      }
+    }
+  }
+
+  function onClickMap(ev) {
+    const { lng: evLon, lat: evLat } = ev.lnglat || {};
+    if (element === "Polypoint") {
+      setPickPoint(evLon, evLat, { changeCenter: true });
+    }
+  }
+
+  function setDrawEditor(_points, disabled = false) {
+    if (!mapUtilsRef.current) {
+      return;
+    }
+    mapUtilsRef.current?.createPoly(element);
+    if (_points && _points.length > 0) {
+      const graphical = mapUtilsRef.current?.setPolygon({
+        points: _points,
+        id: "setDrawEditor",
+        element,
+        onClick: !disabled && onPolygonClick,
+      });
+    }
+  }
+
+  function onPolygonClick(e) {
+    mapUtilsRef.current.setEditPolygon({ ...e.target, element });
+  }
+
+  /**
+   * 设置地图中心点
+   * @param lon
+   * @param lat
+   */
+  function setMapCenter(lon = pickInfo.lon, lat = pickInfo.lat) {
+    lon && lat && mapUtilsRef.current?.setCenter(lon, lat);
+  }
+
+  async function setPickPoint(_lon, _lat, opt?: any) {
+    const { isAutoFixAddr: _isAutoFixAddr = isAutoFixAddr || true, changeCenter, addr: _addr } = opt || {};
+    const lon = _lon || pickInfo.lon;
+    const lat = _lat || pickInfo.lat;
+    let addr = _addr;
+    mapUtilsRef.current?.setPickerMarker(_lon, _lat);
+    if (changeCenter) {
+      setMapCenter(_lon, _lat);
+    }
+
+    // 开启自动修复地址 且 opt 参数中没有地址，请求地址
+    if (_isAutoFixAddr && !addr) {
+      addr = await getAddr(lon, lat);
+    }
+    const res = { ...pickInfo, lon, lat, addr };
+    setPickInfo(res);
+    pickerInfoRef.current = res;
+    props.setPickInfo && props.setPickInfo(res);
+  }
+
+  function getAddr(_lng, _lat) {
+    return new Promise((resolve, reject) => {
+      if (!window.AMap) {
+        reject();
+        return new Error("window.AMap is not defined");
+      }
+
+      setAddrLoading(true);
+      getAddress(_lng, _lat)
+        .then((addr) => {
+          setAddrLoading(false);
+          setPickInfo((_p) => {
+            pickerInfoRef.current = { ..._p, addr };
+            return pickerInfoRef.current;
+          });
+          resolve(addr);
+        })
+        .catch((err) => {
+          reject(err);
+          message.error(err);
+          setAddrLoading(false);
+        });
+    });
+  }
+
+  function resetCenter() {
+    setMapCenter();
+  }
+
+  function getPosition() {
+    setLoading(true);
+    // 获取当前经纬度
+    getCurrentPosition(getCurPositionConf)
+      .then((res) => {
+        const { coords = {} } = res;
+        setPickPoint(coords.longitude, coords.latitude, { changeCenter: true });
+        setLoading(false);
+      })
+      .catch((e) => {
+        setLoading(false);
+        message.error("定位获取失败");
+        console.warn("Error getCurrentPosition e: ", e);
+      });
+  }
+
+  // 展示获取当前定位按钮 props.showGetPositionBtn !== false 且非禁用、只读模式
+  const showGetPositionBtn = props.showGetPositionBtn !== false && !(disabled || readOnly);
+
+  const { markerIcon, positionIcon, resetIcon } = icons || {};
+
+  return (
+    <div className={`location-picker-modal-content location-mode-${mode} location-modal-content-layout-${layout}`}>
+      <PickerInfo
+        element={element}
+        pickInfo={pickInfo}
+        setPickInfo={setPickInfo}
+        setPoint={setPickPoint}
+        addrLoading={addrLoading}
+        defaultLocation={defaultLocation}
+        disabled={disabled}
+        readOnly={element !== "Polypoint" ? true : readOnly}
+      />
+      <div className="location-picker-map-wrap">
+        <div className="location-picker-map">
+          {/* 关闭弹窗之后清除搜索内容 */}
+          {hasSearch && !disabled && !readOnly ? (
+            <MapSearch
+              key={visible}
+              setPoint={element !== "Polypoint" && (readOnly || disabled) ? setMapCenter : setPickPoint}
+              isAutoSearch={isAutoSearch}
+            />
+          ) : null}
+          <AMapCom init={mapInit} loading={loading} markerIconConf={markerIconConf} />
+          <div className="set-map-actions">
+            {/* 已选的点位居中 */}
+            <div className="actions-icon-box reset-icon-box" onClick={resetCenter}>
+              {typeof resetIcon === "string" ? (
+                <img className="reset-icon" src={resetIcon} />
+              ) : (
+                resetIcon || resetIconDef
+              )}
+            </div>
+            {/* 获取当前经纬度 */}
+            {showGetPositionBtn && element === "Polypoint" ? (
+              <div className="actions-icon-box center-icon-box" onClick={getPosition}>
+                {typeof positionIcon === "string" ? (
+                  <img className="center-icon" src={positionIcon} />
+                ) : (
+                  positionIcon || positionIconDef
+                )}
+              </div>
+            ) : null}
+          </div>
+        </div>
+        {disabled || readOnly ? null : <Notice />}
+      </div>
+      {loading && (
+        <div className="spin-loading-wrap">
+          <Spin className="spin-loading" />
+        </div>
+      )}
+    </div>
+  );
+});
+
+export default ModalContent;