diff --git a/package.json b/package.json index 731e6b5..ea924bc 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ "dependencies": { "@ant-design/icons": "^4.2.1", "@antv/f2": "^3.7.7", + "@uiw/react-baidu-map": "^1.17.3", "@umijs/plugin-esbuild": "^1.0.1", "@umijs/plugin-sass": "^1.1.1", "@umijs/preset-react": "1.x", diff --git a/src/assets/map@2x.png b/src/assets/map@2x.png new file mode 100644 index 0000000..9691372 Binary files /dev/null and b/src/assets/map@2x.png differ diff --git a/src/components/BasicShop/MediaComponents/Map/index.less b/src/components/BasicShop/MediaComponents/Map/index.less new file mode 100644 index 0000000..cadf82e --- /dev/null +++ b/src/components/BasicShop/MediaComponents/Map/index.less @@ -0,0 +1,8 @@ +.mapWrap { + height: 100%; + display: flex; + align-items: center; + & > div { + width: 100%; + } +} diff --git a/src/components/BasicShop/MediaComponents/Map/index.tsx b/src/components/BasicShop/MediaComponents/Map/index.tsx new file mode 100644 index 0000000..1c727e2 --- /dev/null +++ b/src/components/BasicShop/MediaComponents/Map/index.tsx @@ -0,0 +1,38 @@ +import React, { memo } from 'react'; +import { Map, Marker, Label, APILoader } from '@uiw/react-baidu-map'; +import styles from './index.less'; +import { IMapConfig } from './schema'; +import logo from '@/assets/map@2x.png'; + +const Mapcomponent = memo((props: IMapConfig & { isTpl: boolean }) => { + const { ak, location, position, isTpl } = props; + return ( + <> + {isTpl ? ( +
+ h5-dooring音频播放组件 +
+ ) : ( +
+ + + + + +
+ )} + + ); +}); + +export default Mapcomponent; diff --git a/src/components/BasicShop/MediaComponents/Map/schema.ts b/src/components/BasicShop/MediaComponents/Map/schema.ts new file mode 100644 index 0000000..bcdd459 --- /dev/null +++ b/src/components/BasicShop/MediaComponents/Map/schema.ts @@ -0,0 +1,51 @@ +import { + ITextConfigType, + ITextAreaConfigType, + IPosConfigType, + TTextDefaultType, + TPosDefaultType, + TTextAreaDefaultType, +} from '@/core/FormComponents/types'; + +export type TMapEditData = Array; +export interface IMapConfig { + ak: TTextDefaultType; + position: TPosDefaultType; + location: TTextAreaDefaultType; +} + +export interface IMapSchema { + editData: TMapEditData; + config: IMapConfig; +} + +const AMap: IMapSchema = { + editData: [ + { + key: 'ak', + name: '百度地图AK', + type: 'Text', + }, + { + key: 'position', + name: '经纬度', + type: 'Pos', + placeObj: { + text: '使用百度拾取坐标系统获取坐标', + link: 'http://api.map.baidu.com/lbsapi/getpoint/index.html', + }, + }, + { + key: 'location', + name: '地址', + type: 'TextArea', + }, + ], + config: { + ak: '你的百度地图ak', + position: [121.444017, 31.237787], + location: '上海市', + }, +}; + +export default AMap; diff --git a/src/components/BasicShop/MediaComponents/Map/template.ts b/src/components/BasicShop/MediaComponents/Map/template.ts new file mode 100644 index 0000000..78224e4 --- /dev/null +++ b/src/components/BasicShop/MediaComponents/Map/template.ts @@ -0,0 +1,6 @@ +const template = { + type: 'Map', + h: 120, + displayName: '地图组件', +}; +export default template; diff --git a/src/components/BasicShop/MediaComponents/schema.ts b/src/components/BasicShop/MediaComponents/schema.ts index c644365..c9f3ed5 100644 --- a/src/components/BasicShop/MediaComponents/schema.ts +++ b/src/components/BasicShop/MediaComponents/schema.ts @@ -1,8 +1,10 @@ import Video from './Video/schema'; import Audio from './Audio/schema'; +import Map from './Map/schema'; const mediaSchema = { Video, Audio, + Map, }; export default mediaSchema; diff --git a/src/components/BasicShop/MediaComponents/template.ts b/src/components/BasicShop/MediaComponents/template.ts index 761fc28..0dafb0b 100644 --- a/src/components/BasicShop/MediaComponents/template.ts +++ b/src/components/BasicShop/MediaComponents/template.ts @@ -1,7 +1,8 @@ import Video from './Video/template'; import Audio from './Audio/template'; +import Map from './Map/template'; -const mediaTemplate = [Video, Audio]; +const mediaTemplate = [Video, Audio, Map]; const MediaTemplate = mediaTemplate.map(v => { return { ...v, category: 'media' }; diff --git a/src/core/FormComponents/types.ts b/src/core/FormComponents/types.ts index 4fcafcb..20760b3 100644 --- a/src/core/FormComponents/types.ts +++ b/src/core/FormComponents/types.ts @@ -133,6 +133,10 @@ export interface IPosConfigType { key: string; name: string; type: 'Pos'; + placeObj: { + text: string; + link: string; + }; } export type TPosItem = number | undefined; diff --git a/yarn.lock b/yarn.lock index 889fa5a..2e1aa90 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2551,6 +2551,13 @@ "@typescript-eslint/types" "4.1.1" eslint-visitor-keys "^2.0.0" +"@uiw/react-baidu-map@^1.17.3": + version "1.17.3" + resolved "https://registry.yarnpkg.com/@uiw/react-baidu-map/-/react-baidu-map-1.17.3.tgz#901f31f580ff57a4ee5cc61e46339ef5822a58f0" + integrity sha512-J97D+2oNLPi9lSJV73oScT3KvjgwcY6nGA1QFn1EamKo1T+22yoIjH7jpzOCX/FxQA4IRd+hbY0p1/wHDGySWQ== + dependencies: + "@babel/runtime" "^7.8.4" + "@umijs/ast@3.2.23": version "3.2.23" resolved "https://registry.yarnpkg.com/@umijs/ast/-/ast-3.2.23.tgz#d1efb1eff7b1ad1daa95a43882a88c362b6035d4"