魏熙美 5 年之前
父節點
當前提交
0c7b8a7a44
共有 1 個檔案被更改,包括 10 行新增3 行删除
  1. 10
    3
      src/pages/building/list/add/components/amap.jsx

+ 10
- 3
src/pages/building/list/add/components/amap.jsx 查看文件

18
     this.amapEvents = {
18
     this.amapEvents = {
19
       created: mapInstance => {
19
       created: mapInstance => {
20
         console.log('高德地图 Map 实例创建成功;如果你要亲自对实例进行操作,可以从这里开始。比如:');
20
         console.log('高德地图 Map 实例创建成功;如果你要亲自对实例进行操作,可以从这里开始。比如:');
21
-        console.log(mapInstance.getZoom());
21
+        console.log('缩放级别:', mapInstance.getZoom());
22
         this.mapInstance = mapInstance
22
         this.mapInstance = mapInstance
23
+        
23
 
24
 
24
         AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.CitySearch'], () => {
25
         AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.CitySearch'], () => {
25
           // 实例化Autocomplete
26
           // 实例化Autocomplete
33
           // 无需再手动执行search方法,autoComplete会根据传入input对应的DOM动态触发search
34
           // 无需再手动执行search方法,autoComplete会根据传入input对应的DOM动态触发search
34
 
35
 
35
           const placeSearch = new AMap.PlaceSearch({
36
           const placeSearch = new AMap.PlaceSearch({
36
-            city: '南京',
37
+            // city: '南京',
37
             map: mapInstance,
38
             map: mapInstance,
38
           })
39
           })
39
 
40
 
59
                 // document.getElementById('info').innerHTML = '您当前所在城市:'+cityinfo;
60
                 // document.getElementById('info').innerHTML = '您当前所在城市:'+cityinfo;
60
                 // 地图显示当前城市
61
                 // 地图显示当前城市
61
                 mapInstance.setBounds(citybounds);
62
                 mapInstance.setBounds(citybounds);
63
+                // 需要在设置坐标成功后,重新设置 缩放级别
64
+                // mapInstance.setZoom(15)
62
               }
65
               }
63
             }
66
             }
64
           })
67
           })
89
       if (value) {
92
       if (value) {
90
         const temp = value.split(',')
93
         const temp = value.split(',')
91
         this.setState({ markerPosition: { longitude: temp[1], latitude: temp[0] } })
94
         this.setState({ markerPosition: { longitude: temp[1], latitude: temp[0] } })
95
+
96
+        // 需要在设置坐标成功后,重新设置 缩放级别
97
+        this.mapInstance.setZoom(15)
92
       }
98
       }
93
     }
99
     }
94
   }
100
   }
97
     return (
103
     return (
98
       <>
104
       <>
99
         <div style={{ width: '100%', height: '400px', position: 'relative' }}>
105
         <div style={{ width: '100%', height: '400px', position: 'relative' }}>
100
-          <Map events={this.amapEvents} amapkey="f0d1d4f82432504003ebf46e5e36ff03">
106
+          {/* zoom={15} 设置后,无效,不知道什么原因,必须手动设置 */}
107
+          <Map plugins={['ToolBar']} events={this.amapEvents} amapkey="f0d1d4f82432504003ebf46e5e36ff03" center={this.state.markerPosition}>
101
             <Marker position={this.state.markerPosition} events={this.markerEvents} />
108
             <Marker position={this.state.markerPosition} events={this.markerEvents} />
102
           </Map>
109
           </Map>
103
           {
110
           {