react AMapLoader调用AMapUI.PositionPicker 拖拽地图选址

    AMapLoader.load({
      key: amapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [
        'AMap.Scale',
        'AMap.AutoComplete',
        'AMap.PlaceSearch',
        'AMap.Geocoder',
        'AMap.MouseTool',
        'AMap.PolygonEditor',
        'AMap.ToolBar',
        'AMapUI'
      ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      AMapUI: {
        "version": "1.1", // 指定AMapUI的版本
        "plugins": ["misc/PositionPicker"] // 需要加载的AMapUI组件
      }
    })
      .then((AMap) => {

        AMapUI.loadUI(['misc/PositionPicker'], function (PositionPicker: any) {
          // 普通图层
          const tileLayer = new AMap.TileLayer();
          // 卫星图层
          const satelliteLayer = new AMap.TileLayer.Satellite();
          // 路网图层
          const roadNetLayer = new AMap.TileLayer.RoadNet();
          const layers = [satelliteLayer];

          const currentMap = new AMap.Map('editMap', {
            center: locationCtx.current.marker || [
              mapLocation.lng,
              mapLocation.lat,
            ], // 中心点坐标
            zoom: 13.8, // 级别
            layers,
          });

          const map = currentMap;

          var positionPicker = new PositionPicker({
            mode: 'dragMap', //设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
            map,
            iconStyle:{//自定义外观
              url:ImgLocation,//图片地址
              size:[28,28],  //要显示的点大小，将缩放图片
              ancher:[15,28],//锚点的位置，即被size缩放之后，图片的什么位置作为选中的位置
           }
          });
          //TODO:事件绑定、结果处理等
          positionPicker.on('success', function (positionResult: any) {
            console.log('success', positionResult);
            locationCtx.current.marker = [positionResult.position.lng, positionResult.position.lat];
            locationCtx.current.adcode = positionResult.regeocode.addressComponent.adcode;
            locationCtx.current.address = positionResult.regeocode.formattedAddress;
            setSearchVal(positionResult.regeocode.formattedAddress);
            setLocationInfo({
              ...locationCtx.current,
            });
          });
          positionPicker.on('fail', function (positionResult: any) {
            console.log('fail', positionResult);
          });

          positionPicker.start();
          currentMap.panBy(0, 1);
          currentMap.addControl(
            new AMap.ToolBar({
              liteStyle: true,
            }),
          );

          // 比例尺
          currentMap.addControl(new AMap.Scale());

          // 输入提示
          const autoComplete = new AMap.AutoComplete({
            input: 'searchBox',
          });
          autoComplete.on('select', function (e: any) {
            const { location, name, address, adcode } = e.poi;
            if (!location) {
              message.error('获取经纬度失败，请重新选择地址');
              return;
            }
            addMarker(
              [Number(location.lng), Number(location.lat)],
              adcode,
              name || address,
            );
          });

          // 地理编码 查询信息
          const geocoder = new AMap.Geocoder({
            radius: 1000, //以已知坐标为中心点，radius为半径，返回范围内兴趣点和道路信息
            extensions: 'all', //返回地址描述以及附近兴趣点和道路信息，默认“base”
            batch: false,
          });

          // 赋值待用
          mouseToolCtx.current = new AMap.MouseTool(currentMap);
          polygonEditCtx.current = new AMap.PolygonEditor(currentMap);
          geocoderCtx.current = geocoder;
          mapCtx.current = currentMap;
          layerCtx.current = {
            tileLayer,
            satelliteLayer,
            roadNetLayer,
          };

          if (value) {
            if (value.marker) {
              addMarker(value.marker, value.adcode || '', value.address || '');

            }
            if (value.polygon && value.polygon.length > 0) {
              const polygon = new AMap.Polygon({
                path: value.polygon,
              });
              currentMap.add(polygon);
              polygonEditCtx.current.setTarget(polygon);
              if (!props.disabled) {
                polygonEditCtx.current.open();
              }
              setPolygonTime(1);
              currentMap.setFitView([polygon]);
              polygonCtx.current = polygon;
              locationCtx.current.polygon = value.polygon;
              setLocationInfo({
                ...locationCtx.current,
              });
            }
          }

        });

      })
      .catch((e: any) => {
        console.log(e);
      });