参考高德开放平台https://lbs.amap.com/api/javascript-api-v2/guide/abc/amap-react

功能要求：使用AntDesignPro开发系统管理端，考勤模块需要设置APP考勤打卡区域，需要页面显示地图定位并设置考勤范围（地图上画圈），以便APP在画圈范围内打卡使用。

1、 准备

2、 下载react类组件代码

参考官网流程，可正常加载出地图组件，下面是我的页面和组件文件

组件文件

3、 安装并引入AmAP Loader

npm i @amap/amap-jsapi-loader --save

组件文件引入

import React, { Component } from 'react';
import AmapLoader from '@amap/amap-jsapi-loader';
import './MapContainer.css';
import { ProForm, ProFormItem, ProFormText } from '@ant-design/pro-components';
import { Button, Col, Form, Input, message, Row } from 'antd';

4、 由于是新申请的key，需要配置秘钥（2021-12-02以前申请的key）可忽略此步骤

在引用文件下直接写（保证在使用key之前引入就可以）：

window._AMapSecurityConfig = {
  securityJsCode: 'xxxxxxxxxxxxxxxxx',
};

5、 参考官网，绘制地图

// 2.dom渲染成功后进行map对象的创建
  componentDidMount() {
    let that = this;
    AmapLoader.load({
      key: 'xxxxxxxxxxxxxx', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ['AMap.Map', 'AMap.Geocoder', 'AMap.Marker', 'AMap.LngLat', 'AMap.Circle'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        const map = new AMap.Map('container', {
          //设置地图容器id
          resizeEnable: true,
          zoom: 11,
        });
        let oldmarker = 1;
        AMap.plugin('AMap.Geocoder', function () {
          const geocoder = new AMap.Geocoder({
            city: '0371', //默认城市
          });
        });
      })
      .catch((e) => {
        console.log(e);
      });
  }

  render() {
    // 1.初始化创建地图容器,div标签作为地图容器，同时为该div指定id属性；

    return (
      <div>
        <div id="container" className="map" style={{ height: '300px' }}></div>
      </div>
    );
  }
}

6、 地图显示出来后，第一步已经完成了，接下来需要根据页面输入地址，获取地址坐标值

此处需要用到地理编码和你地理编码接口

在Amap.plugin方法里面继续写入

function geoCode() {
            let address = document.getElementById('address').value;
            console.log(address);
            if (address) {
              geocoder.getLocation(address, function (status, result) {
                console.log(status);
                console.log(result);
                if (status === 'complete' && result.geocodes.length) {
                  let lnglat = result.geocodes[0].location;
                  //设置页面值
                                      let radius = document.getElementById('radius').value;
                                      document.getElementById('gps').value = lnglat.lng + ',' + lnglat.lat;
                                      that.onChangeGps(lnglat.lng + ',' + lnglat.lat);
                } else {
                  message.error('请输入有效的地址信息');
                }
              });
            }
          }
          //定义页面按钮点击事件
          document.getElementById('address_confirm').onclick = geoCode;

7、获取地址坐标成功后，需要在地图画圈

此处用到添加覆盖物，这里使用圆形，也可以设置其他形状

画圆圈需要中心坐标点，次坐标由上一步获得，然后设置半径，此值由页面输入

定义画圆方法，此方法定义在了Amap.plugin外面

function addCircle() {
          if (document.getElementById('gps').value) {
            let lnglat = document.getElementById('gps').value.split(',');
            let radius = document.getElementById('radius').value;
            console.log(lnglat);
            console.log(radius);
            map.clearMap();    //清除全部覆盖物
            const circle = new AMap.Circle({
              center: new AMap.LngLat(lnglat[0], lnglat[1]), // 圆心位置
              radius: radius, //半径
              strokeColor: '#F33', //线颜色
              strokeOpacity: 1, //线透明度
              strokeWeight: 3, //线粗细度
              fillColor: '#ee2200', //填充颜色
              fillOpacity: 0.35, //填充透明度
            });
            map.add(circle);//添加覆盖物
            map.setFitView();//根据覆盖物范围调整视野
          }
        }

然后在上一步获取坐标值的地方，调用画圈方法

function geoCode() {
            let address = document.getElementById('address').value;
            console.log(address);
            if (address) {
              geocoder.getLocation(address, function (status, result) {
                console.log(status);
                console.log(result);
                if (status === 'complete' && result.geocodes.length) {
                  let lnglat = result.geocodes[0].location;
                  //设置页面值
                  let radius = document.getElementById('radius').value;
                  document.getElementById('gps').value = lnglat.lng + ',' + lnglat.lat;
                  that.onChangeGps(lnglat.lng + ',' + lnglat.lat);
                  //调用画圈方法
                  addCircle(); 
                } else {
                  message.error('请输入有效的地址信息');
                }
              });
            }
          }

到此，已经实现根据页面地址和半径范围，检索地址和画圈了，如图

修改半径范围，可调整区域大小

8、 编辑时，需要进入页面直接显示画圈范围，并显示标记的地址

在Amap.plugin方法里面最后，直接调用画圈方法 addCircle()，可以根据编辑页面初始值直接画圈。

根据坐标获取地理位置，需要用到逆向地理编码方法，在Amap.plugin方法里面添加逆地理编码方法

//根据坐标获取地址
          function regeoCode() {
            let lnglat = document.getElementById('gps').value.split(',');
            //需要正确配置地图apikey才可以获取
            geocoder.getAddress(lnglat, function (status, result) {
              console.log(status);
              console.log(result);
              if (status === 'complete' && result.regeocode) {
                let address = result.regeocode.formattedAddress;
                document.getElementById('address').value = address;
              } else {
                layer.msg('根据经纬度查询地址失败');
              }
            });
          }

这样就可以在编辑页面，初始化时直接显示地址并画圈

9、 最后，调用组件问题

地址和半径都由页面表单设置，涉及到与组件交互，表单赋值的问题，最终试了好久才实现。

（初学的时候做的这个功能，对组件交互不是很熟，后来也没再调整过，也许有更简单的方法吧）

先给表单设置from

const [addForm] = Form.useForm();

<ModalForm
        title="新建签到点"
        width="800px"
        form={addForm}
        onInit={() => {
          addForm.resetFields();
        }}
        visible={createModalVisible}
        onVisibleChange={setCreateModalVisible}
        onFinish={async (value) => {
          const success = await modify(value as API.CompanyItem);
          if (success) {
            setCreateModalVisible(false);
            if (actionRef.current) {
              actionRef.current.reload();
            }
          }
        }}
        modalProps={{
          destroyOnClose: true,
          maskClosable: false,
          bodyStyle: { maxHeight: 500, overflowY: 'auto' },
        }}
      >

然后将此form作为参数，直接传入组件内，组件内form的属性同样可以使用，但是不会提示对应的属性方法，此处直接写就可以（我在组件内使用的时候，一直没有提示form方法，以致一直以为form不能使用）

<MapComponent form={addForm}></MapComponent>

组件内获取参数并使用

constructor(props) {
    super(props);
  }

  onChangeGps(value) {
    this.props.form.setFieldValue('gps', value);//将坐标值赋值给表单
  }

10、 完整代码

页面index.tsx新建表单

<ModalForm
        title="新建签到点"
        width="800px"
        form={addForm}
        onInit={() => {
          addForm.resetFields();
        }}
        visible={createModalVisible}
        onVisibleChange={setCreateModalVisible}
        onFinish={async (value) => {
          const success = await modify(value as API.CompanyItem);
          if (success) {
            setCreateModalVisible(false);
            if (actionRef.current) {
              actionRef.current.reload();
            }
          }
        }}
        modalProps={{
          destroyOnClose: true,
          maskClosable: false,
          bodyStyle: { maxHeight: 500, overflowY: 'auto' },
        }}
      >
        <ProFormSelect
          name="cid"
          label="公司名称"
          showSearch
          options={companySelect}
          rules={[
            {
              required: true,
              message: '请选择公司',
            },
          ]}
          placeholder="请选择公司"
        />
        <ProFormText
          name="name"
          label="签到点名称"
          rules={[
            {
              required: true,
              message: '请输入签到点名称',
            },
            {
              max: 16,
              message: '最多可输入16个字符',
            },
          ]}
          placeholder="请输入签到点名称"
        />
        <ProFormText
          name="radius"
          id="radius"
          label="签到半径(米)"
          placeholder="请输入签到半径"
          initialValue={200}
        />
        <Row gutter={24}>
          <Col xl={{ span: 21 }}>
            <ProFormText name="address" id="address" label="签到地址" placeholder="请输入地址" />
          </Col>
          <Col xl={{ span: 2 }}>
            <Button key="search" type="primary" id="address_confirm" style={{ marginTop: 29 }}>
              搜索
            </Button>
          </Col>
        </Row>
        <ProFormText hidden name="gps" id="gps" />
        <MapComponent form={addForm}></MapComponent>
      </ModalForm>

页面index.tsx编辑表单

<ModalForm
        title="编辑签到点"
        width="800px"
        form={editForm}
        onInit={() => {
          editForm.resetFields();
        }}
        visible={updateModalVisible}
        onVisibleChange={setUpdateModalVisible}
        onFinish={async (value) => {
          const success = await modify(value as API.CompanyItem);
          if (success) {
            setUpdateModalVisible(false);
            if (actionRef.current) {
              actionRef.current.reload();
            }
          }
        }}
        modalProps={{
          destroyOnClose: true,
          maskClosable: false,
          bodyStyle: { maxHeight: 500, overflowY: 'auto' },
        }}
      >
        <ProFormSelect
          name="cid"
          label="公司名称"
          showSearch
          options={companySelect}
          rules={[
            {
              required: true,
              message: '请选择公司',
            },
          ]}
          disabled
          placeholder="请选择公司"
          initialValue={currentRow?.cid || ''}
        />
        <ProFormText hidden name="id" initialValue={currentRow?.id} />
        <ProFormText
          name="name"
          label="签到点名称"
          rules={[
            {
              required: true,
              message: '请输入签到点名称',
            },
            {
              max: 16,
              message: '最多可输入16个字符',
            },
          ]}
          placeholder="请输入签到点名称"
          initialValue={currentRow?.name}
        />
        <ProFormText
          name="radius"
          id="radius"
          label="签到半径(米)"
          placeholder="请输入签到半径"
          initialValue={currentRow?.radius || null}
        />
        <Row gutter={24}>
          <Col xl={{ span: 21 }}>
            <ProFormText
              name="address"
              id="address"
              label="签到地址"
              placeholder="请输入地址"
              initialValue={currentRow?.address || null}
            />
          </Col>
          <Col xl={{ span: 2 }}>
            <Button key="search" type="primary" id="address_confirm" style={{ marginTop: 29 }}>
              搜索
            </Button>
          </Col>
        </Row>
        <ProFormText hidden name="gps" id="gps" initialValue={currentRow?.gps || null} />
        <MapComponent form={editForm}></MapComponent>
      </ModalForm>

地图组件MapContainer.js

import React, { Component } from 'react';
import AmapLoader from '@amap/amap-jsapi-loader';
import './MapContainer.css';
import { ProForm, ProFormItem, ProFormText } from '@ant-design/pro-components';
import { Button, Col, Form, Input, message, Row } from 'antd';

window._AMapSecurityConfig = {
  securityJsCode: 'xxxxxxxxxxxxxx',
};

class MapComponent extends Component {
  constructor(props) {
    super(props);
  }

  onChangeGps(value) {
    this.props.form.setFieldValue('gps', value);
  }

  // 2.dom渲染成功后进行map对象的创建
  componentDidMount() {
    let that = this;
    AmapLoader.load({
      key: 'xxxxxxxxxxxx', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ['AMap.Map', 'AMap.Geocoder', 'AMap.Marker', 'AMap.LngLat', 'AMap.Circle'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        const map = new AMap.Map('container', {
          //设置地图容器id
          resizeEnable: true,
          zoom: 11,
        });
        let oldmarker = 1;
        AMap.plugin('AMap.Geocoder', function () {
          const geocoder = new AMap.Geocoder({
            city: '0371', //默认城市
          });

          //根据坐标获取地址
          function regeoCode() {
            let lnglat = document.getElementById('gps').value.split(',');
            //需要正确配置地图apikey才可以获取
            geocoder.getAddress(lnglat, function (status, result) {
              console.log(status);
              console.log(result);
              if (status === 'complete' && result.regeocode) {
                let address = result.regeocode.formattedAddress;
                document.getElementById('address').value = address;
              } else {
                layer.msg('根据经纬度查询地址失败');
              }
            });
          }

          function geoCode() {
            let address = document.getElementById('address').value;
            console.log(address);
            if (address) {
              geocoder.getLocation(address, function (status, result) {
                console.log(status);
                console.log(result);
                if (status === 'complete' && result.geocodes.length) {
                  let lnglat = result.geocodes[0].location;
                  let radius = document.getElementById('radius').value;
                  document.getElementById('gps').value = lnglat.lng + ',' + lnglat.lat;
                  that.onChangeGps(lnglat.lng + ',' + lnglat.lat);
                  addCircle();
                } else {
                  message.error('请输入有效的地址信息');
                }
              });
            }
          }

          document.getElementById('address_confirm').onclick = geoCode;

          addCircle();
        });

        function addCircle() {
          if (document.getElementById('gps').value) {
            let lnglat = document.getElementById('gps').value.split(',');
            let radius = document.getElementById('radius').value;
            console.log(lnglat);
            console.log(radius);
            map.clearMap();
            const circle = new AMap.Circle({
              center: new AMap.LngLat(lnglat[0], lnglat[1]), // 圆心位置
              radius: radius, //半径
              strokeColor: '#F33', //线颜色
              strokeOpacity: 1, //线透明度
              strokeWeight: 3, //线粗细度
              fillColor: '#ee2200', //填充颜色
              fillOpacity: 0.35, //填充透明度
            });
            map.add(circle);
            map.setFitView();
          }
        }
      })
      .catch((e) => {
        console.log(e);
      });
  }

  render() {
    // 1.初始化创建地图容器,div标签作为地图容器，同时为该div指定id属性；

    return (
      <div>
        <div id="container" className="map" style={{ height: '300px' }}></div>
      </div>
    );
  }
}
//导出地图组建类
export default MapComponent;

MapContainer.css文件没有改动

#container {
  width: 100%;
  margin: 0px;
  padding: 0px;
}

已上，就是AntDesignPro使用高德地图设置考勤区域的全部内容。