提交

src/pages/building/list/add/components/amap.jsx

@@ -18,8 +18,9 @@ class Amap extends React.Component {
     this.amapEvents = {
       created: mapInstance => {
         console.log('高德地图 Map 实例创建成功；如果你要亲自对实例进行操作，可以从这里开始。比如：');
-        console.log(mapInstance.getZoom());
+        console.log('缩放级别：', mapInstance.getZoom());
         this.mapInstance = mapInstance
+        
 
         AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.CitySearch'], () => {
           // 实例化Autocomplete
@@ -33,7 +34,7 @@ class Amap extends React.Component {
           // 无需再手动执行search方法，autoComplete会根据传入input对应的DOM动态触发search
 
           const placeSearch = new AMap.PlaceSearch({
-            city: '南京',
+            // city: '南京',
             map: mapInstance,
           })
 
@@ -59,6 +60,8 @@ class Amap extends React.Component {
                 // document.getElementById('info').innerHTML = '您当前所在城市：'+cityinfo;
                 // 地图显示当前城市
                 mapInstance.setBounds(citybounds);
+                // 需要在设置坐标成功后，重新设置 缩放级别
+                // mapInstance.setZoom(15)
               }
             }
           })
@@ -89,6 +92,9 @@ class Amap extends React.Component {
       if (value) {
         const temp = value.split(',')
         this.setState({ markerPosition: { longitude: temp[1], latitude: temp[0] } })
+
+        // 需要在设置坐标成功后，重新设置 缩放级别
+        this.mapInstance.setZoom(15)
       }
     }
   }
@@ -97,7 +103,8 @@ class Amap extends React.Component {
     return (
       <>
         <div style={{ width: '100%', height: '400px', position: 'relative' }}>
-          <Map events={this.amapEvents} amapkey="f0d1d4f82432504003ebf46e5e36ff03">
+          {/* zoom={15} 设置后，无效，不知道什么原因，必须手动设置 */}
+          <Map plugins={['ToolBar']} events={this.amapEvents} amapkey="f0d1d4f82432504003ebf46e5e36ff03" center={this.state.markerPosition}>
             <Marker position={this.state.markerPosition} events={this.markerEvents} />
           </Map>
           {