From ed818b6ebdb0a27b12e785ca28e43e06f6708d56 Mon Sep 17 00:00:00 2001 From: jinye Date: Thu, 12 Dec 2024 15:35:59 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9C=B0=E7=90=86=E4=BD=8D=E7=BD=AE?= =?UTF-8?q?=E9=9D=99=E6=80=81=E5=B1=95=E7=A4=BA=E6=94=AF=E6=8C=81=E5=86=85?= =?UTF-8?q?=E5=B5=8C=E5=9C=B0=E5=9B=BE=E6=96=B9=E5=BC=8F=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-CN/components/form/location-picker.md | 65 ++++++++++++++--- .../amis-ui/src/components/BaiduMapPicker.tsx | 73 +++++++++++-------- .../src/renderers/Form/LocationPicker.tsx | 27 ++++++- 3 files changed, 123 insertions(+), 42 deletions(-) diff --git a/docs/zh-CN/components/form/location-picker.md b/docs/zh-CN/components/form/location-picker.md index 4102f64d671..5952fd542fe 100644 --- 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 index 3765ee48ef0..8466eee3057 100644 --- 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< })} /> -
- {!onlySelectCurrentLoc && - locs.map((item, index) => ( + {!showSug ? null : ( +
+ {!onlySelectCurrentLoc && + locs.map((item, index) => ( +
+
{item.title}
+
{item.address}
+ {locIndex === index ? ( + + ) : null} +
+ ))} + {onlySelectCurrentLoc && locs.length > 0 && (
-
{item.title}
-
{item.address}
- {locIndex === index ? ( +
{locs[0].title}
+
+ {locs[0].address} +
+ {locIndex === 0 ? ( ) : null}
- ))} - {onlySelectCurrentLoc && locs.length > 0 && ( -
-
{locs[0].title}
-
{locs[0].address}
- {locIndex === 0 ? : null} -
- )} -
+ )} +
+ )} - {hasSug && !onlySelectCurrentLoc ? ( + {showSug && hasSug && !onlySelectCurrentLoc ? (
{sugs.map(item => (
{ } 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 { })} ref={this.domRef} > - {value.address} + {staticSchema?.embed ? ( + <> + {staticSchema.showAddress === false ? null : ( +
{value.address}
+ )} + + + ) : ( + {value.address} + )}
); }