魏熙美 5 yıl önce
ebeveyn
işleme
8e2cf63454

+ 13
- 2
src/pages/building/list/add/components/amap.jsx Dosyayı Görüntüle

6
 class Amap extends React.Component {
6
 class Amap extends React.Component {
7
   constructor(props) {
7
   constructor(props) {
8
     super(props);
8
     super(props);
9
+    // 高德地图 Marker 实例
10
+    this.markerInstance = undefined
11
+    // 高德地图 Map 实例
12
+    this.mapInstance = undefined
9
     this.amapEvents = {
13
     this.amapEvents = {
10
       created: mapInstance => {
14
       created: mapInstance => {
11
         console.log('高德地图 Map 实例创建成功;如果你要亲自对实例进行操作,可以从这里开始。比如:');
15
         console.log('高德地图 Map 实例创建成功;如果你要亲自对实例进行操作,可以从这里开始。比如:');
12
         console.log(mapInstance.getZoom());
16
         console.log(mapInstance.getZoom());
17
+        this.mapInstance = mapInstance
18
+
13
         AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.CitySearch'], () => {
19
         AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.CitySearch'], () => {
14
           // 实例化Autocomplete
20
           // 实例化Autocomplete
15
           const autoOptions = {
21
           const autoOptions = {
51
           })
57
           })
52
         })
58
         })
53
 
59
 
60
+        // 实例点击事件
54
         mapInstance.on('click', e => {
61
         mapInstance.on('click', e => {
55
           const lngLat = `${e.lnglat.getLng()},${e.lnglat.getLat()}`
62
           const lngLat = `${e.lnglat.getLng()},${e.lnglat.getLat()}`
56
           console.log('坐标位置:', lngLat)
63
           console.log('坐标位置:', lngLat)
63
         console.log('高德地图 Marker 实例创建成功;如果你要亲自对实例进行操作,可以从这里开始。比如:');
70
         console.log('高德地图 Marker 实例创建成功;如果你要亲自对实例进行操作,可以从这里开始。比如:');
64
         console.log(markerInstance.getPosition());
71
         console.log(markerInstance.getPosition());
65
 
72
 
66
-        // 地理坐标位置定位
67
-        // markerInstance.setPosition();
73
+        this.markerInstance = markerInstance
68
       },
74
       },
69
     }
75
     }
70
     this.markerPosition = { longitude: 120, latitude: 30 };
76
     this.markerPosition = { longitude: 120, latitude: 30 };
71
   }
77
   }
72
 
78
 
73
   render() {
79
   render() {
80
+    const { value } = this.props
81
+    if (value) {
82
+      this.markerInstance.setPosition(value.split(','))
83
+    }
84
+
74
     return (
85
     return (
75
       <>
86
       <>
76
         <div style={{ width: '100%', height: '400px' }}>
87
         <div style={{ width: '100%', height: '400px' }}>