Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Dec 12, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 55 additions & 10 deletions docs/zh-CN/components/form/location-picker.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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 | 内嵌模式是否展示定位当当前控件 |

### 坐标系说明

Expand Down
73 changes: 43 additions & 30 deletions packages/amis-ui/src/components/BaiduMapPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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(
Expand All @@ -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) {
Expand Down Expand Up @@ -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 (
Expand All @@ -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
Expand Down
27 changes: 25 additions & 2 deletions packages/amis/src/renderers/Form/LocationPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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>
);
}
Expand Down
Loading