地图

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

@@ -6,10 +6,16 @@ import '../amap.less'
 class Amap extends React.Component {
   constructor(props) {
     super(props);
+    // 高德地图 Marker 实例
+    this.markerInstance = undefined
+    // 高德地图 Map 实例
+    this.mapInstance = undefined
     this.amapEvents = {
       created: mapInstance => {
         console.log('高德地图 Map 实例创建成功；如果你要亲自对实例进行操作，可以从这里开始。比如：');
         console.log(mapInstance.getZoom());
+        this.mapInstance = mapInstance
+
         AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.CitySearch'], () => {
           // 实例化Autocomplete
           const autoOptions = {
@@ -51,6 +57,7 @@ class Amap extends React.Component {
           })
         })
 
+        // 实例点击事件
         mapInstance.on('click', e => {
           const lngLat = `${e.lnglat.getLng()},${e.lnglat.getLat()}`
           console.log('坐标位置:', lngLat)
@@ -63,14 +70,18 @@ class Amap extends React.Component {
         console.log('高德地图 Marker 实例创建成功；如果你要亲自对实例进行操作，可以从这里开始。比如：');
         console.log(markerInstance.getPosition());
 
-        // 地理坐标位置定位
-        // markerInstance.setPosition();
+        this.markerInstance = markerInstance
       },
     }
     this.markerPosition = { longitude: 120, latitude: 30 };
   }
 
   render() {
+    const { value } = this.props
+    if (value) {
+      this.markerInstance.setPosition(value.split(','))
+    }
+
     return (
       <>
         <div style={{ width: '100%', height: '400px' }}>