@hzab/form-render 0.4.2 → 0.5.0

package/src/components/LocationPicker/README.md

@@ -1,8 +1,12 @@
-#### 使用前安装依赖
+## 使用前安装依赖
 
 npm install @amap/amap-jsapi-loader
 
-#### 引入
+## 注意事项
+
+- isObjectRes 在 @hzab/form-render0.5.0 版本中去除，结果全部存放在对象中
+
+## 引入
 
 ```jsx
 import MapLocationPoint from "./mapLocationPoint";
@@ -14,22 +18,26 @@ export default function AMap(props) {
 
 ### InfoPanel Attributes
 
-| 参数          | 类型      | 必填 | 默认值    | 说明                                                        |
-| ------------- | --------- | ---- | --------- | ----------------------------------------------------------- |
-| mode          | string    | 否   | dialog    | 地图显示的类型， dialog 弹窗显示、 show 直接显示            |
-| layout        | string    | 否   | ver       | 选择器和地图的布局 hor 水平、 ver 垂直                      |
-| hasSearch     | boolean   | 否   | true      | 是否允许搜索                                                |
-| isObjectRes   | boolean   | 否   | true      | 是否把数据存放在对象中                                      |
-| isAutoFixAddr | boolean   | 否   | false     | 打开地图时是否根据经纬度自动修正已填的地址                  |
-| changeMode    | string    | 否   | move      | 改变经纬度等数据的触发模式；移动地图：move，点击地图：click |
-| lonKey        | string    | 否   | longitude | 经度字段 key                                                |
-| latKey        | string    | 否   | latitude  | 维度字段 key                                                |
-| addrKey       | string    | 否   | address   | 地址字段 key                                                |
-| isAutoSearch  | boolean   | 否   | false     | 搜索框是否自动搜索                                          |
-| pickerIcon    | ReactNode | 否   | -         | 地图选点弹窗开启按钮的 icon 元素                            |
-| pickerIconUrl | string    | 否   | -         | 地图选点弹窗开启按钮的 icon img 的地址                      |
-
-- isObjectRes 是否把数据存放在对象中
-
-  - true: 把所有数据存放在一个对象中（该对象和其他表单项平级），对象 key 为当前项的 name；
-  - false: 所有数据打平放到当前的 data 中，和其他表单项平级
+| 参数               | 类型    | 必填 | 默认值    | 说明                                                        |
+| ------------------ | ------- | ---- | --------- | ----------------------------------------------------------- |
+| mode               | string  | 否   | dialog    | 地图显示的类型， dialog 弹窗显示、 show 直接显示            |
+| layout             | string  | 否   | ver       | 选择器和地图的布局 hor 水平、 ver 垂直                      |
+| hasSearch          | boolean | 否   | true      | 是否允许搜索                                                |
+| isAutoFixAddr      | boolean | 否   | false     | 打开地图时是否根据经纬度自动修正已填的地址                  |
+| changeMode         | string  | 否   | move      | 改变经纬度等数据的触发模式；移动地图：move，点击地图：click |
+| lonKey             | string  | 否   | longitude | 经度字段 key                                                |
+| latKey             | string  | 否   | latitude  | 维度字段 key                                                |
+| addrKey            | string  | 否   | address   | 地址字段 key                                                |
+| isAutoSearch       | boolean | 否   | false     | 搜索框是否自动搜索                                          |
+| markerIconConf     | Object  | 否   | -         | markerIcon 配置对象                                         |
+| icons              | Object  | 否   | -         | icon 图片                                                   |
+| getCurPositionConf | Object  | 否   | -         | getCurrentPosition Config                                   |
+
+#### icons
+
+| 参数         | 类型   | 必填 | 默认值 | 说明             |
+| ------------ | ------ | ---- | ------ | ---------------- |
+| markerIcon   | string | 否   | dialog | marker icon 图片 |
+| pickerIcon   | string | 否   | dialog | 选点 icon 图片   |
+| positionIcon | string | 否   | dialog | 定位 icon 图片   |
+| resetIcon    | string | 否   | dialog | 重置 icon 图片   |

package/src/components/LocationPicker/assets/svg-icon.js

@@ -0,0 +1,84 @@
+export const markerIcon = (
+  <svg
+    t="1708497164654"
+    className="marker-icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="8489"
+    width="200"
+    height="200"
+  >
+    <path
+      d="M512 1024c-205.76-241.472-326.272-411.712-361.664-510.72a384 384 0 1 1 723.072 0.832C837.76 612.928 717.312 782.848 512 1024.064z m0-512a128 128 0 1 0 0-256 128 128 0 0 0 0 256z"
+      fill="#1677ff"
+      p-id="8490"
+    ></path>
+  </svg>
+);
+
+export const pickerIcon = (
+  <svg
+    t="1708305242338"
+    className="picker-icon"
+    viewBox="0 0 1088 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="1494"
+    width="200"
+    height="200"
+  >
+    <path
+      d="M812.224 416a288 288 0 1 0-576 0c0 118.144 94.528 272.128 288 456.576 193.472-184.448 288-338.432 288-456.576z m-288 544c-234.688-213.312-352-394.688-352-544a352 352 0 1 1 704 0c0 149.312-117.312 330.688-352 544z"
+      fill="#1677ff"
+      p-id="1495"
+    ></path>
+    <path
+      d="M524.224 448a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m0 64a128 128 0 1 1 0-256 128 128 0 0 1 0 256z m345.6 192l102.4 256h-288v-64h-320v64h-288l102.4-256h691.2z m-68.928 0H247.552l-76.8 192h706.944l-76.8-192z"
+      fill="#1677ff"
+      p-id="1496"
+    ></path>
+  </svg>
+);
+
+export const positionIcon = (
+  <svg
+    t="1708478996666"
+    className="position-icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="6897"
+    // xmlns:xlink="http://www.w3.org/1999/xlink"
+    width="200"
+    height="200"
+  >
+    <path
+      d="M895.044488 550.176484l-42.200124 0C834.62235 708.540282 709.048353 834.001715 550.718325 852.244194l0 42.258453c0 21.946848-17.790178 39.730886-39.729863 39.730886s-39.729863-17.784038-39.729863-39.730886l0-42.258453C312.926524 834.001715 187.354574 708.540282 169.131537 550.176484l-42.199101 0c-21.940708 0-39.730886-17.786085-39.730886-39.729863 0-21.940708 17.789155-39.726793 39.730886-39.726793l42.257429 0c18.24248-158.335145 143.711076-283.907095 302.068733-302.126039l0-42.200124c0-21.940708 17.789155-39.730886 39.729863-39.730886s39.729863 17.789155 39.729863 39.730886l0 42.258453c158.331052 18.241456 283.904025 143.706983 302.126039 302.06771l42.200124 0c21.940708 0 39.729863 17.786085 39.729863 39.726793C934.774351 532.390399 916.986219 550.176484 895.044488 550.176484zM696.395172 470.719828l76.16161 0c-17.251919-114.39847-107.492176-204.651007-221.838458-221.913159l0 76.236312c0 21.939685-17.790178 39.726793-39.729863 39.726793s-39.729863-17.787108-39.729863-39.726793l0-76.165704c-114.39233 17.256012-204.644867 107.495246-221.910089 221.842551l76.233242 0c21.946848 0 39.729863 17.786085 39.729863 39.726793 0 21.943778-17.781992 39.729863-39.729863 39.729863l-76.162634 0c17.251919 114.39847 107.498316 204.649983 221.839481 221.910089l0-76.234265c0-21.943778 17.789155-39.72577 39.729863-39.72577s39.729863 17.781992 39.729863 39.72577l0 76.234265c114.346281-17.260106 204.586538-107.511619 221.838458-221.910089l-76.16161 0c-21.941732 0-39.729863-17.786085-39.729863-39.729863C656.665309 488.505913 674.453441 470.719828 696.395172 470.719828zM510.988462 550.176484c-21.939685 0-39.729863-17.786085-39.729863-39.729863 0-21.940708 17.789155-39.726793 39.729863-39.726793s39.729863 17.786085 39.729863 39.726793C550.718325 532.390399 532.928147 550.176484 510.988462 550.176484z"
+      fill="#000000"
+      p-id="6898"
+    ></path>
+  </svg>
+);
+
+export const resetIcon = (
+  <svg
+    t="1708485324277"
+    className="reset-icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="7503"
+    width="200"
+    height="200"
+  >
+    <path
+      d="M512 682.666667c71.296 0 128-56.789333 128-128s-56.704-128-128-128-128 56.789333-128 128 56.704 128 128 128z"
+      p-id="7504"
+    ></path>
+    <path
+      d="M888.192 477.269333a381.44 381.44 0 0 0-57.813333-137.344 386.261333 386.261333 0 0 0-103.68-103.68 381.866667 381.866667 0 0 0-137.344-57.813333 385.194667 385.194667 0 0 0-78.421334-7.68V85.333333L341.333333 213.333333l169.6 128V256.085333c20.650667-0.085333 41.301333 1.877333 61.226667 5.973334a297.002667 297.002667 0 0 1 106.752 44.928 298.88 298.88 0 0 1 80.725333 80.725333A297.258667 297.258667 0 0 1 810.666667 554.666667a300.032 300.032 0 0 1-23.466667 116.266666 303.36 303.36 0 0 1-27.477333 50.688 307.2 307.2 0 0 1-36.608 44.330667 299.861333 299.861333 0 0 1-150.869334 81.365333 304.213333 304.213333 0 0 1-120.405333 0 297.002667 297.002667 0 0 1-106.794667-44.970666 298.752 298.752 0 0 1-80.64-80.64A298.496 298.496 0 0 1 213.333333 554.666667H128a384.853333 384.853333 0 0 0 65.664 214.784 388.096 388.096 0 0 0 103.594667 103.594666A381.866667 381.866667 0 0 0 512 938.666667a387.84 387.84 0 0 0 77.397333-7.808 384.597333 384.597333 0 0 0 137.301334-57.813334 379.136 379.136 0 0 0 56.789333-46.890666 393.728 393.728 0 0 0 46.933333-56.832A381.952 381.952 0 0 0 896 554.666667a387.84 387.84 0 0 0-7.808-77.397334z"
+      p-id="7505"
+    ></path>
+  </svg>
+);

package/src/components/LocationPicker/common/utils.ts

@@ -10,18 +10,12 @@
       addr: value[addrKey],
     }
  */
-export function getPropsValue(value = {}, field: any, opt) {
-  const { isObjectRes = true, lonKey = "longitude", latKey = "latitude", addrKey = "address" } = opt || {};
+export function getPropsValue(value = {}, opt) {
+  const { lonKey = "longitude", latKey = "latitude", addrKey = "address" } = opt || {};
   let lon = value[lonKey];
   let lat = value[latKey];
   let addr = value[addrKey];
   // 数据和其他子项平级的情况
-  let form = getParentValue(field);
-  if (form && isObjectRes === false) {
-    lon = form[lonKey];
-    lat = form[latKey];
-    addr = form[addrKey];
-  }
   const res = {
     lon,
     lat,

package/src/components/LocationPicker/components/MapSearch/index.less

@@ -1,4 +1,4 @@
-.location-map-search {
+.ant-select-auto-complete.location-map-search {
   width: 300px;
   position: absolute;
   top: 0;

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

@@ -9,6 +9,7 @@
     position: relative;
     width: 100%;
     flex: 1;
+    height: 500px;
     .a-map-container {
       height: inherit;
       .amap-logo,
@@ -17,22 +18,30 @@
       }
     }
 
-    .location-picker-center-icon {
+    .location-picker-center-icon-box {
       position: absolute;
       top: 50%;
       left: 50%;
-      transform: translate(-50%, -100%);
       width: 34px;
+      height: 34px;
+      transform: translate(-50%, -100%);
       color: #1677ff;
+      img,
+      svg {
+        width: 34px;
+        height: 34px;
+      }
     }
 
     .set-map-actions {
       position: absolute;
       right: 20px;
       bottom: 20px;
-      & > img {
+      & > img,
+      & > svg {
         display: block;
         width: 32px;
+        height: 32px;
         margin-bottom: 8px;
         padding: 4px;
         background-color: #fff;
@@ -70,7 +79,6 @@
     .location-picker-info {
       margin-right: 20px;
     }
-    .location-picker-info;
   }
   &.location-modal-content-layout-hor-reverse {
     flex-direction: row-reverse;

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

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Spin, message } from "antd";
-import { useField } from "@formily/react";
+import { observer } from "@formily/react";
 import { debounce } from "lodash";
 
 import PickerInfo from "../PickerInfo";
@@ -13,13 +13,15 @@ import { MapUtils } from "../../Map/AMap/common/utils";
 import { getAddress } from "../../servers";
 import { getPropsValue } from "../../common/utils";
 
-import MarkerIcon from "../../assets/marker-icon.svg";
-import PositionIcon from "../../assets/position-icon.svg";
-import ResetIcon from "../../assets/reset-icon.svg";
+import {
+  markerIcon as markerIconDef,
+  positionIcon as positionIconDef,
+  resetIcon as resetIconDef,
+} from "../../assets/svg-icon";
 
 import "./index.less";
 
-export const ModalContent = (props) => {
+export const ModalContent = observer((props: any) => {
   const {
     mode,
     /**
@@ -32,13 +34,6 @@ export const ModalContent = (props) => {
     layout = "ver",
     // 是否允许搜索
     hasSearch = true,
-    /**
-     * 
-     isObjectRes 
-      true: 把所有数据存放在一个对象中（该对象和其他表单项平级），对象 key 为当前项的 name
-      false: 所有数据打平放到当前的 data 中，和其他表单项平级
-     */
-    isObjectRes = true,
     /**
      * 打开地图时是否根据经纬度自动修正已填的地址
      */
@@ -57,63 +52,82 @@ export const ModalContent = (props) => {
     isAutoSearch = true,
     //
     visible,
-    defaultLocation,
+    visibleKey,
+    defaultLocation = {},
     disabled,
     readOnly,
+    icons,
+    markerIconConf,
+    getCurPositionConf,
   } = props;
 
-  const field: any = useField() || {};
-
   const mapUtilsRef = useRef<MapUtils>();
 
   // 数据格式转为内部格式，方便存取
   const formatVal = useMemo(
     () =>
-      getPropsValue(value, field, {
-        isObjectRes,
+      getPropsValue(value, {
         lonKey,
         latKey,
         addrKey,
       }),
-    [isObjectRes, lonKey, latKey, addrKey, value, field.data],
+    [lonKey, latKey, addrKey, value, 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 isShowMode = mode === "show";
 
   useEffect(() => {
     setLoading(props.loading);
   }, [props.loading]);
 
   useEffect(() => {
-    if (visible) {
+    if (isShowMode) {
+      // mode === 'show' 的情况
+      let _lon = formatVal.lon;
+      let _lat = formatVal.lat;
+      if (_lon && _lat && _lon !== pickInfo.lon && _lat !== pickInfo.lat) {
+        // 解决关闭弹窗之后点位不居中的问题
+        if (window.AMap && window.AMap.LngLat) {
+          setMapCenter(_lon, _lat);
+          setPickPoint(_lon, _lat, { isAutoFixAddr: false, addr: formatVal.addr });
+        }
+      }
+    } else if (visibleKey) {
+      // 处理弹窗展示数据回显逻辑
       let _lon = defaultLocation.lon;
       let _lat = defaultLocation.lat;
+      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);
       }
-      setPickPoint(_lon, _lat, { isAutoFixAddr: false });
+      if (_lon && _lat && _lon !== pickerInfoRef.current?.lon && _lat !== pickerInfoRef.current?.lat) {
+        setPickPoint(_lon, _lat, { isAutoFixAddr: false, addr: addr });
+      }
     }
-  }, [visible, formatVal, changeMode]);
+  }, [visibleKey, formatVal, isShowMode]);
 
   function mapInit({ map, mapUtils }) {
     mapUtilsRef.current = mapUtils;
-    let _lon = defaultLocation.lon;
-    let _lat = defaultLocation.lat;
+    let _lon = isShowMode ? undefined : defaultLocation.lon;
+    let _lat = isShowMode ? undefined : defaultLocation.lat;
     if (pickInfo.lon && pickInfo.lat) {
       _lon = pickInfo.lon;
       _lat = pickInfo.lat;
     }
-    setPickPoint(_lon, _lat, { isAutoFixAddr });
 
     setMapCenter(_lon, _lat);
-    console.log("props.loading", props.loading);
 
     setLoading(props.loading || false);
 
@@ -126,18 +140,18 @@ export const ModalContent = (props) => {
           setPickPoint(evLon, evLat, { changeCenter: true });
         });
       } else {
+        const handleMove = debounce(function (ev) {
+          let currentCenter = mapUtilsRef.current?.getCenter();
+          const { lng: centerLon, lat: centerLat } = currentCenter || {};
+          // 移动选中点位的情况
+          let _lon = centerLon;
+          let _lat = centerLat;
+          setPickPoint(_lon, _lat);
+        }, 1000);
         // 移动地图
-        mapUtilsRef.current.on(
-          "mouseup",
-          debounce(function (ev) {
-            let currentCenter = mapUtilsRef.current?.getCenter();
-            const { lng: centerLon, lat: centerLat } = currentCenter || {};
-            // 移动选中点位的情况
-            let _lon = centerLon;
-            let _lat = centerLat;
-            setPickPoint(_lon, _lat);
-          }, 1000),
-        );
+        mapUtilsRef.current.on("mouseup", handleMove);
+        // PC 端需要额外监听地图缩放事件
+        mapUtilsRef.current.on("zoomend", handleMove);
       }
     } else {
       // 禁用、只读情况使用 marker 展示点位
@@ -151,13 +165,14 @@ export const ModalContent = (props) => {
    * @param lat
    */
   function setMapCenter(lon = pickInfo.lon, lat = pickInfo.lat) {
-    mapUtilsRef.current?.setCenter(lon, lat);
+    lon && lat && mapUtilsRef.current?.setCenter(lon, lat);
   }
 
   async function setPickPoint(_lon, _lat, opt?: any) {
-    const { isAutoFixAddr: _isAutoFixAddr = isAutoFixAddr || true, changeCenter } = opt || {};
+    const { isAutoFixAddr: _isAutoFixAddr = isAutoFixAddr || true, changeCenter, addr: _addr } = opt || {};
     const lon = _lon || pickInfo.lon;
     const lat = _lat || pickInfo.lat;
+    let addr = _addr;
     // 禁用、只读情况使用 marker 展示点位
     if (changeMode === "click" || disabled || readOnly) {
       mapUtilsRef.current?.setPickerMarker(_lon, _lat);
@@ -165,9 +180,14 @@ export const ModalContent = (props) => {
     if (changeCenter) {
       setMapCenter(_lon, _lat);
     }
-    const addr = _isAutoFixAddr || !pickInfo.addr ? await getAddr(lon, lat) : pickInfo.addr;
+
+    // 开启自动修复地址 且 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);
   }
 
@@ -182,7 +202,10 @@ export const ModalContent = (props) => {
       getAddress(_lng, _lat)
         .then((addr) => {
           setAddrLoading(false);
-          setPickInfo((_p) => ({ ..._p, addr }));
+          setPickInfo((_p) => {
+            pickerInfoRef.current = { ..._p, addr };
+            return pickerInfoRef.current;
+          });
           resolve(addr);
         })
         .catch((err) => {
@@ -200,7 +223,7 @@ export const ModalContent = (props) => {
   function getPosition() {
     setLoading(true);
     // 获取当前经纬度
-    getCurrentPosition()
+    getCurrentPosition(getCurPositionConf)
       .then((res) => {
         const { coords = {} } = res;
         setPickPoint(coords.longitude, coords.latitude, { changeCenter: true });
@@ -233,25 +256,45 @@ export const ModalContent = (props) => {
     );
   };
 
+  const { markerIcon, positionIcon, resetIcon } = icons || {};
+
   return (
     <div className={`location-picker-modal-content location-mode-${mode} location-modal-content-layout-${layout}`}>
       {pickInfoRender()}
       <div className="location-picker-map-wrap">
         <div className="location-picker-map">
           {/* 关闭弹窗之后清除搜索内容 */}
-          {hasSearch && visible ? <MapSearch setPoint={setPickPoint} isAutoSearch={isAutoSearch} /> : null}
-          <AMapCom init={mapInit} loading={loading} style={{ height: "500px" }} />
+          {hasSearch ? <MapSearch key={visible} setPoint={setPickPoint} isAutoSearch={isAutoSearch} /> : null}
+          <AMapCom init={mapInit} loading={loading} markerIconConf={markerIconConf} />
           <div className="set-map-actions">
             {/* 已选的点位居中 */}
-            {showResetCenter ? <img className="reset-icon" src={ResetIcon} onClick={resetCenter} /> : null}
+            {showResetCenter ? (
+              typeof resetIcon === "string" ? (
+                <img className="reset-icon" src={resetIcon} onClick={resetCenter} />
+              ) : (
+                resetIcon || resetIconDef
+              )
+            ) : null}
             {/* 获取当前经纬度 */}
-            {showGetPositionBtn ? <img className="center-icon" src={PositionIcon} onClick={getPosition} /> : null}
+            {showGetPositionBtn ? (
+              typeof positionIcon === "string" ? (
+                <img className="center-icon" src={positionIcon} onClick={getPosition} />
+              ) : (
+                positionIcon || positionIconDef
+              )
+            ) : null}
           </div>
           {changeMode !== "click" && !(disabled || readOnly) && (
-            <img className="location-picker-center-icon" src={MarkerIcon} />
+            <div className="location-picker-center-icon-box">
+              {typeof positionIcon === "string" ? (
+                <img className="location-picker-center-icon" src={markerIcon} />
+              ) : (
+                markerIcon || markerIconDef
+              )}
+            </div>
           )}
         </div>
-        <Notice changeMode={changeMode} />
+        {disabled || readOnly ? null : <Notice changeMode={changeMode} />}
       </div>
       {loading && (
         <div className="spin-loading-wrap">
@@ -260,6 +303,6 @@ export const ModalContent = (props) => {
       )}
     </div>
   );
-};
+});
 
 export default ModalContent;

package/src/components/LocationPicker/components/ResInfo/index.less

@@ -13,9 +13,15 @@
     &:focus {
       background: transparent;
     }
-    .location-picker-icon {
-      width: 16px;
+    .location-picker-icon-box {
+      display: inline-block;
       margin-right: 4px;
+      svg,
+      img {
+        width: 16px;
+        height: 16px;
+        vertical-align: middle;
+      }
     }
     .location-picker-text {
       display: inline-block;

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

@@ -1,8 +1,8 @@
 import { useMemo } from "react";
 import { Button } from "antd";
-import { useField } from "@formily/react";
+import { observer } from "@formily/react";
 
-import pickerIconDefault from "./picker-icon.svg";
+import { pickerIcon as pickerIconDefault } from "../../assets/svg-icon";
 import { getPropsValue } from "../../common/utils";
 
 import "./index.less";
@@ -12,30 +12,18 @@ import "./index.less";
  * @param props
  * @returns
  */
-export const ResInfo = (props) => {
-  const {
-    onShow,
-    isObjectRes,
-    lonKey,
-    latKey,
-    addrKey,
-    value,
-    pickerText = "选点",
-    pickerIcon,
-    pickerIconUrl,
-  } = props || {};
-  const field: any = useField() || {};
+export const ResInfo = observer((props: any) => {
+  const { onShow, lonKey, latKey, addrKey, value, pickerText = "选点", pickerIcon } = props || {};
 
   // 数据格式转为内部格式，方便存取
   const formatVal = useMemo(
     () =>
-      getPropsValue(value, field, {
-        isObjectRes,
+      getPropsValue(value, {
         lonKey,
         latKey,
         addrKey,
       }),
-    [isObjectRes, lonKey, latKey, addrKey, value, field.data],
+    [lonKey, latKey, addrKey, value, value?.[lonKey], value?.[latKey], value?.[addrKey]],
   );
 
   return (
@@ -46,13 +34,19 @@ export const ResInfo = (props) => {
           <div>纬度：{formatVal.lat}</div>
         </div>
         <Button className="location-btn" color="primary" type="text" onClick={onShow}>
-          {pickerIcon ? pickerIcon : <img className="location-picker-icon" src={pickerIconUrl || pickerIconDefault} />}
+          <span className="location-picker-icon-box">
+            {typeof pickerIcon === "string" ? (
+              <img className="location-picker-icon" src={pickerIcon} />
+            ) : (
+              pickerIcon || pickerIconDefault
+            )}
+          </span>
           <span className="location-picker-text">{pickerText}</span>
         </Button>
       </div>
       <div>地址：{formatVal.addr}</div>
     </div>
   );
-};
+});
 
 export default ResInfo;