Yansen 2 년 전
부모
커밋
ca9ce42537
2개의 변경된 파일48개의 추가작업 그리고 29개의 파일을 삭제
  1. 46
    28
      src/components/map/index.jsx
  2. 2
    1
      src/pages/issue/components/Issue/index.jsx

+ 46
- 28
src/components/map/index.jsx 파일 보기

6
 import iconPath from '@/assets/icons/marker.png';
6
 import iconPath from '@/assets/icons/marker.png';
7
 import style from './style.module.less';
7
 import style from './style.module.less';
8
 
8
 
9
+/**
10
+ * 这里使用2个map, 每个 map 负责不同的场景
11
+ * 如果使用 1 个map, 通过属性去控制, 微信暂时有 bug 比如 showLocation 就有bug
12
+ */
9
 export default (props) => {
13
 export default (props) => {
10
   const { readOnly, location, onChange } = props;
14
   const { readOnly, location, onChange } = props;
11
 
15
 
16
+  console.log('-----map---readOnly---', readOnly);
17
+
12
   const id = React.useMemo(() => `map-${Math.random().toString(36).substring(2, 10)}`, []);
18
   const id = React.useMemo(() => `map-${Math.random().toString(36).substring(2, 10)}`, []);
19
+  const idReadOnly = React.useMemo(() => `map-${Math.random().toString(36).substring(2, 10)}`, []);
13
   const mapCtxRef = React.useRef();
20
   const mapCtxRef = React.useRef();
14
 
21
 
15
   const [
22
   const [
16
-    // markers,
23
+    markers,
17
     center,
24
     center,
18
   ] = React.useMemo(() => {
25
   ] = React.useMemo(() => {
19
     // eslint-disable-next-line no-undef
26
     // eslint-disable-next-line no-undef
20
     const loc = location || DEFAULT_POS;
27
     const loc = location || DEFAULT_POS;
21
     const [longitude, latitude] = loc.split(',');
28
     const [longitude, latitude] = loc.split(',');
22
-
23
-    // const mks = [{
24
-    //   id: 1,
25
-    //   longitude,
26
-    //   latitude,
27
-    //   iconPath,
28
-    //   width: 17,
29
-    //   height: 20
30
-    // }];
29
+    
30
+    const mks = readOnly ? [{
31
+      id: 1,
32
+      longitude,
33
+      latitude,
34
+      iconPath,
35
+      width: 17,
36
+      height: 20
37
+    }] : [];
31
 
38
 
32
     return [
39
     return [
33
-      // mks,
40
+      mks,
34
       { longitude, latitude }
41
       { longitude, latitude }
35
     ]
42
     ]
36
-  }, [location]);
43
+  }, [location, readOnly]);
37
 
44
 
38
   const moveTo = (ctx, point) => {
45
   const moveTo = (ctx, point) => {
39
     ctx.moveToLocation({
46
     ctx.moveToLocation({
86
 
93
 
87
   React.useEffect(() => {
94
   React.useEffect(() => {
88
     if (!readOnly) {
95
     if (!readOnly) {
96
+      getContext();
97
+
98
+      // 获取定位
89
       fixedLocation().then((res) => {
99
       fixedLocation().then((res) => {
90
         const { longitude, latitude } = res;
100
         const { longitude, latitude } = res;
91
         onChange([longitude, latitude].join(','));
101
         onChange([longitude, latitude].join(','));
92
       })
102
       })
93
     }
103
     }
94
-  }, [readOnly]);
95
-
96
-  React.useEffect(() => {
97
-    getContext();
98
-  }, [getContext]);
104
+  // eslint-disable-next-line react-hooks/exhaustive-deps
105
+  }, [readOnly, getContext]);
99
 
106
 
100
   return (
107
   return (
101
     <View className={style['map-wrapper']}>
108
     <View className={style['map-wrapper']}>
102
-      <Map
103
-        id={id}
104
-        showLocation
105
-        longitude={center.longitude}
106
-        latitude={center.latitude}
107
-      // markers={markers}
108
-      >
109
-        {!readOnly && (
110
-          <Icon name="aim" size="24px" onClick={onRefresh} color="#1A7565" className={style['icon']} />
111
-        )}
112
-      </Map>
109
+      {
110
+        !readOnly && (
111
+          <Map
112
+            id={id}
113
+            showLocation
114
+            longitude={center.longitude}
115
+            latitude={center.latitude}
116
+          >
117
+            <Icon name="aim" size="24px" onClick={onRefresh} color="#1A7565" className={style['icon']} />
118
+          </Map>
119
+        )
120
+      }
121
+      {
122
+        readOnly && (
123
+          <Map
124
+            id={idReadOnly}
125
+            longitude={center.longitude}
126
+            latitude={center.latitude}
127
+            markers={markers}
128
+          />
129
+        )
130
+      }
113
     </View >
131
     </View >
114
   )
132
   )
115
 }
133
 }

+ 2
- 1
src/pages/issue/components/Issue/index.jsx 파일 보기

144
         onChange={onDateChange}
144
         onChange={onDateChange}
145
       />
145
       />
146
 
146
 
147
+      {/* 地图只在新增的时候允许修改 */}
147
       <Map
148
       <Map
148
-        readOnly={readOnly}
149
+        readOnly={issue?.issueId}
149
         location={formData.location}
150
         location={formData.location}
150
         onChange={e => !formData.location && setFieldChange('location', e)}
151
         onChange={e => !formData.location && setFieldChange('location', e)}
151
       />
152
       />