🆕 添加地图组件

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",

src/components/BasicShop/MediaComponents/Map/index.less

@@ -0,0 +1,8 @@
+.mapWrap {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  & > div {
+    width: 100%;
+  }
+}

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 ? (
+        <div>
+          <img src={logo} style={{ width: '100%' }} alt="h5-dooring音频播放组件"></img>
+        </div>
+      ) : (
+        <div className={styles.mapWrap}>
+          <APILoader akay={ak}>
+            <Map widget={['NavigationControl']} zoom={13}>
+              <Marker animation={2} position={{ lng: position[0], lat: position[1] }} />
+              <Label
+                content={location}
+                position={{ lng: position[0], lat: position[1] }}
+                style={{
+                  color: '#000',
+                  borderColor: '#06c',
+                  padding: '3px 10px',
+                  borderRadius: '6px',
+                }}
+              />
+            </Map>
+          </APILoader>
+        </div>
+      )}
+    </>
+  );
+});
+
+export default Mapcomponent;

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<ITextConfigType | ITextAreaConfigType | IPosConfigType>;
+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;

src/components/BasicShop/MediaComponents/Map/template.ts

@@ -0,0 +1,6 @@
+const template = {
+  type: 'Map',
+  h: 120,
+  displayName: '地图组件',
+};
+export default template;

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;

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' };

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;

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"