feat: 地理位置静态展示支持内嵌地图方式展示

baidu · Dec 12, 2024 · 42d7cfd · 42d7cfd
1 parent 96e0a8f
commit 42d7cfd
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 42 deletions.
diff --git a/docs/zh-CN/components/form/location-picker.md b/docs/zh-CN/components/form/location-picker.md
@@ -30,6 +30,47 @@ order: 30
 
 注意其中的 `ak` 参数只能在 amis 官网示例中使用，请前往[百度地图开放平台](http://lbsyun.baidu.com/)申请自己的 `ak`。
 
+## 静态展示
+
+```schema: scope="body"
+{
+  "type": "form",
+  "debug": true,
+  "body": [
+    {
+      "type": "location-picker",
+      "name": "location",
+      "ak": "LiZT5dVbGTsPI91tFGcOlSpe5FDehpf7",
+      "label": "默认展示方式",
+      "value": {
+        "address": "北京市西城区复兴门内大街97号",
+        "lat": 39.91404014231763,
+        "lng": 116.36857981150743,
+        "zoom": 12
+      },
+      "static": true
+    },
+    {
+      "type": "location-picker",
+      "name": "location",
+      "ak": "LiZT5dVbGTsPI91tFGcOlSpe5FDehpf7",
+      "label": "内嵌地图展示",
+      "value": {
+        "address": "北京市西城区复兴门内大街97号",
+        "lat": 39.91404014231763,
+        "lng": 116.36857981150743,
+        "zoom": 12
+      },
+      "static": true,
+      "staticSchema": {
+        "embed": true,
+        "showAddress": true
+      }
+    }
+  ]
+}
+```
+
 ## 高德地图（暂不支持）
 
 ```schema: scope="body"
@@ -57,16 +98,20 @@ order: 30
 
 当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
 
-| 属性名               | 类型               | 默认值                               | 说明                                                                             |
-| -------------------- | ------------------ | ------------------------------------ | -------------------------------------------------------------------------------- |
-| value                | `LocationData`     | 参考 [`LocationData`](#LocationData) |                                                                                  |
-| vendor               | 'baidu' \| 'gaode' | 'baidu'                              | 地图厂商，目前只实现了百度地图和高德地图                                         |
-| ak                   | `string`           | 无                                   | 百度/高德地图的 ak                                                               |
-| clearable            | `boolean`          | false                                | 输入框是否可清空                                                                 |
-| placeholder          | `string`           | '请选择位置'                         | 默认提示                                                                         |
-| autoSelectCurrentLoc | `boolean`          | false                                | 是否自动选中当前地理位置                                                         |
-| onlySelectCurrentLoc | `boolean`          | false                                | 是否限制只能选中当前地理位置，设置为 true 后，可用于充当定位组件                 |
-| coordinatesType      | 'bd09' \| 'gcj02'  | 'bd09'                               | 坐标系类型，默认百度坐标，使用高德地图时应设置为'gcj02'， 高德地图不支持坐标转换 |
+| 属性名                   | 类型               | 默认值                               | 说明                                                                             |
+| ------------------------ | ------------------ | ------------------------------------ | -------------------------------------------------------------------------------- |
+| value                    | `LocationData`     | 参考 [`LocationData`](#LocationData) |                                                                                  |
+| vendor                   | 'baidu' \| 'gaode' | 'baidu'                              | 地图厂商，目前只实现了百度地图和高德地图                                         |
+| ak                       | `string`           | 无                                   | 百度/高德地图的 ak                                                               |
+| clearable                | `boolean`          | false                                | 输入框是否可清空                                                                 |
+| placeholder              | `string`           | '请选择位置'                         | 默认提示                                                                         |
+| autoSelectCurrentLoc     | `boolean`          | false                                | 是否自动选中当前地理位置                                                         |
+| onlySelectCurrentLoc     | `boolean`          | false                                | 是否限制只能选中当前地理位置，设置为 true 后，可用于充当定位组件                 |
+| coordinatesType          | 'bd09' \| 'gcj02'  | 'bd09'                               | 坐标系类型，默认百度坐标，使用高德地图时应设置为'gcj02'， 高德地图不支持坐标转换 |
+| staticSchema             | `object`           |                                      | 静态展示，内嵌模式`{static: true: embed: true}`时的额外配置                      |
+| staticSchema.embed       | `boolean`          | false                                | 是否内嵌地图展示地理位置                                                         |
+| staticSchema.showAddress | `boolean`          | true                                 | 内嵌模式是否展示文字地址                                                         |
+| staticSchema.showGeoLoc  | `boolean`          | false                                | 内嵌模式是否展示定位当当前控件                                                   |
 
 ### 坐标系说明
 

diff --git a/packages/amis-ui/src/components/BaiduMapPicker.tsx b/packages/amis-ui/src/components/BaiduMapPicker.tsx
@@ -36,10 +36,13 @@ interface MapPickerProps {
     lat: number;
     lng: number;
     city?: string;
+    zoom?: number;
   };
   onChange?: (value: any) => void;
   autoSelectCurrentLoc?: boolean;
   onlySelectCurrentLoc?: boolean;
+  showSug?: boolean;
+  showGeoLoc?: boolean;
 }
 
 interface LocationItem {
@@ -122,15 +125,16 @@ export class BaiduMapPicker extends React.Component<
     let point = value
       ? new BMap.Point(value.lng, value.lat)
       : new BMap.Point(116.404, 39.915);
+    const zoom = value?.zoom || 15;
     if (this.props.coordinatesType == 'gcj02') {
       point = await this.covertPoint(
         point,
         COORDINATES_GCJ02,
         COORDINATES_BD09
       );
-      map.centerAndZoom(point, 15);
+      map.centerAndZoom(point, zoom);
     } else {
-      map.centerAndZoom(point, 15);
+      map.centerAndZoom(point, zoom);
     }
 
     map.addControl(
@@ -142,7 +146,9 @@ export class BaiduMapPicker extends React.Component<
     geolocationControl.addEventListener('locationSuccess', (e: any) => {
       this.getLocations(e.point, autoSelectCurrentLoc);
     });
-    map.addControl(geolocationControl);
+    if (this.props.showGeoLoc === true) {
+      map.addControl(geolocationControl);
+    }
 
     map.addEventListener('click', (e: any) => {
       if (this.props.onlySelectCurrentLoc) {
@@ -343,6 +349,7 @@ export class BaiduMapPicker extends React.Component<
     const {classnames: cx} = this.props;
     const onlySelectCurrentLoc = this.props.onlySelectCurrentLoc ?? false;
     const {locIndex, locs, inputValue, sugs} = this.state;
+    const showSug = this.props.showSug ?? true;
     const hasSug = Array.isArray(sugs) && sugs.length;
 
     return (
@@ -366,41 +373,47 @@ export class BaiduMapPicker extends React.Component<
           })}
         />
 
-        <div
-          className={cx('MapPicker-result', {
-            invisible: hasSug
-          })}
-        >
-          {!onlySelectCurrentLoc &&
-            locs.map((item, index) => (
+        {!showSug ? null : (
+          <div
+            className={cx('MapPicker-result', {
+              invisible: hasSug
+            })}
+          >
+            {!onlySelectCurrentLoc &&
+              locs.map((item, index) => (
+                <div
+                  onClick={this.handleSelect}
+                  key={index}
+                  data-index={index}
+                  className={cx('MapPicker-item')}
+                >
+                  <div className={cx('MapPicker-itemTitle')}>{item.title}</div>
+                  <div className={cx('MapPicker-itemDesc')}>{item.address}</div>
+                  {locIndex === index ? (
+                    <Icon icon="success" className="icon" />
+                  ) : null}
+                </div>
+              ))}
+            {onlySelectCurrentLoc && locs.length > 0 && (
               <div
                 onClick={this.handleSelect}
-                key={index}
-                data-index={index}
+                key="locs-current"
+                data-index={0}
                 className={cx('MapPicker-item')}
               >
-                <div className={cx('MapPicker-itemTitle')}>{item.title}</div>
-                <div className={cx('MapPicker-itemDesc')}>{item.address}</div>
-                {locIndex === index ? (
+                <div className={cx('MapPicker-itemTitle')}>{locs[0].title}</div>
+                <div className={cx('MapPicker-itemDesc')}>
+                  {locs[0].address}
+                </div>
+                {locIndex === 0 ? (
                   <Icon icon="success" className="icon" />
                 ) : null}
               </div>
-            ))}
-          {onlySelectCurrentLoc && locs.length > 0 && (
-            <div
-              onClick={this.handleSelect}
-              key="locs-current"
-              data-index={0}
-              className={cx('MapPicker-item')}
-            >
-              <div className={cx('MapPicker-itemTitle')}>{locs[0].title}</div>
-              <div className={cx('MapPicker-itemDesc')}>{locs[0].address}</div>
-              {locIndex === 0 ? <Icon icon="success" className="icon" /> : null}
-            </div>
-          )}
-        </div>
+            )}
+          </div>
+        )}
 
-        {hasSug && !onlySelectCurrentLoc ? (
+        {showSug && hasSug && !onlySelectCurrentLoc ? (
           <div className={cx('MapPicker-sug')}>
             {sugs.map(item => (
               <div

diff --git a/packages/amis/src/renderers/Form/LocationPicker.tsx b/packages/amis/src/renderers/Form/LocationPicker.tsx
@@ -139,7 +139,13 @@ export class LocationControl extends React.Component<LocationControlProps> {
   }
 
   renderStatic(displayValue = '-') {
-    const {classnames: cx, value} = this.props;
+    const {
+      classnames: cx,
+      value,
+      staticSchema,
+      ak,
+      coordinatesType
+    } = this.props;
     const __ = this.props.translate;
 
     if (!value) {
@@ -153,7 +159,24 @@ export class LocationControl extends React.Component<LocationControlProps> {
         })}
         ref={this.domRef}
       >
-        <span>{value.address}</span>
+        {staticSchema?.embed ? (
+          <>
+            {staticSchema.showAddress === false ? null : (
+              <div className="mb-2">{value.address}</div>
+            )}
+            <BaiduMapPicker
+              ak={ak}
+              value={value}
+              coordinatesType={coordinatesType}
+              autoSelectCurrentLoc={false}
+              onlySelectCurrentLoc={true}
+              showSug={false}
+              showGeoLoc={staticSchema.showGeoLoc}
+            />
+          </>
+        ) : (
+          <span>{value.address}</span>
+        )}
       </div>
     );
   }