|
|
@@ -4,12 +4,15 @@ import { Map, Marker } from 'react-amap';
|
|
4
|
4
|
import styles from '../amap.less'
|
|
5
|
5
|
|
|
6
|
6
|
class Amap extends React.Component {
|
|
|
7
|
+
|
|
7
|
8
|
constructor(props) {
|
|
8
|
9
|
super(props);
|
|
|
10
|
+
|
|
9
|
11
|
// 高德地图 Marker 实例
|
|
10
|
12
|
this.markerInstance = undefined
|
|
11
|
13
|
// 高德地图 Map 实例
|
|
12
|
14
|
this.mapInstance = undefined
|
|
|
15
|
+
|
|
13
|
16
|
this.amapEvents = {
|
|
14
|
17
|
created: mapInstance => {
|
|
15
|
18
|
console.log('高德地图 Map 实例创建成功；如果你要亲自对实例进行操作，可以从这里开始。比如：');
|
|
|
@@ -20,7 +23,7 @@ class Amap extends React.Component {
|
|
20
|
23
|
// 实例化Autocomplete
|
|
21
|
24
|
const autoOptions = {
|
|
22
|
25
|
// city 限定城市，默认全国
|
|
23
|
|
- city: '全国',
|
|
|
26
|
+ // city: '025',
|
|
24
|
27
|
// input 为绑定输入提示功能的input的DOM ID
|
|
25
|
28
|
input: 'amapInput',
|
|
26
|
29
|
}
|
|
|
@@ -76,14 +79,34 @@ class Amap extends React.Component {
|
|
76
|
79
|
},
|
|
77
|
80
|
}
|
|
78
|
81
|
this.markerPosition = { longitude: 120, latitude: 30 };
|
|
|
82
|
+ const { value } = this.props
|
|
|
83
|
+ console.log('项目地图 value', value)
|
|
|
84
|
+
|
|
|
85
|
+
|
|
|
86
|
+
|
|
|
87
|
+ this.setMapPosition.bind(this)
|
|
79
|
88
|
}
|
|
80
|
89
|
|
|
81
|
|
- render() {
|
|
|
90
|
+ componentDidUpdate(prevProps) {
|
|
82
|
91
|
const { value } = this.props
|
|
83
|
|
- if (value) {
|
|
84
|
|
- // this.markerInstance.setPosition(value.split(','))
|
|
|
92
|
+ // console.log('项目地图 value', value)
|
|
|
93
|
+ console.log('this.markerInstance: ', this.markerInstance, this.props)
|
|
|
94
|
+ if (this.props.value !== prevProps.value) {
|
|
|
95
|
+ if (value) {
|
|
|
96
|
+ console.log('项目地图 value', value)
|
|
|
97
|
+ this.setMapPosition(value)
|
|
|
98
|
+ }
|
|
|
99
|
+ }
|
|
|
100
|
+ }
|
|
|
101
|
+
|
|
|
102
|
+ setMapPosition(value) {
|
|
|
103
|
+ console.log('获取this：', this.markerInstance)
|
|
|
104
|
+ if (this.markerInstance) {
|
|
|
105
|
+ // this.markerInstance.setPosition(value)
|
|
85
|
106
|
}
|
|
|
107
|
+ }
|
|
86
|
108
|
|
|
|
109
|
+ render() {
|
|
87
|
110
|
return (
|
|
88
|
111
|
<>
|
|
89
|
112
|
<div style={{ width: '100%', height: '400px', position: 'relative' }}>
|
