web端引入高德地图

1、安装@amap/amap-jsapi-loader 依赖

高德地图加载器：npm i @amap/amap-jsapi-loader -S

2、在对应的文件引入依赖或者全局引入。

注意：由于高德api文档提示（您在2021年12月02日申请以后的key需要配合您的安全密钥一起使用）需要配置安全密钥

import AMapLoader from "@amap/amap-jsapi-loader";
// 设置安全密钥
window._AMapSecurityConfig = {
    securityJsCode: '安全密钥',
}

3、初始化地图实例

html：
<template>
        <el-autocomplete
          v-model="fenceForm.taskAddress"
          style="width: 500px"
          popper-class="autoAddressClass"
          :fetch-suggestions="querySearchAsync1"
          :trigger-on-focus="false"
          placeholder="请输入任务地点"
          clearable
          @select="handleSelect1"
        >
          <template slot-scope="{ item }">
            <i class="el-icon-search fl mgr10" />
            <div style="overflow: hidden">
              <div class="title">{{ item.name }}</div>
              <span class="address ellipsis">{{ item.detailAddress }}</span>
            </div>
          </template>
        </el-autocomplete>
        <!-- <div id="map-container" style="width: 100%; height: 500px"></div> -->
        <div id="gaoDeMap-container" style="width: 100%; height: 500px" />
</template>

js

initGaoDeMap(taskLongitude = 113.341923, taskLatitude = 23.125452) {
      var that = this;

      AMapLoader.load({
        key: gaoDeKey, // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.Geolocation",
          "AMap.AutoComplete",
          "AMap.PlaceSearch",
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          // 创建中心点的经纬度对象
          let lnglat = new AMap.LngLat(taskLongitude, taskLatitude);

          this.currentlnglat = lnglat;

          this.GaoDeMap = new AMap.Map("gaoDeMap-container", {
            viewMode: "2D", //是否为3D地图模式
            zoom: 18, //初始化地图级别
            center: lnglat, //初始化地图中心点位置
          });

          // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
          this.GaoDeMap.addControl(new AMap.ToolBar());

          // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
          this.GaoDeMap.addControl(new AMap.Scale());

          // 创建中心点
          this.createGaoMarker(this.currentlnglat);
          // 创建中心点范围
          this.createGaoCircle(this.currentlnglat);

          // 绑定事件
          this.GaoDeMap.on("click", this.clickHandler);

          // 搜索框自动完成类
          this.autoComplete = new AMap.AutoComplete({
            input: "taskAddress",
          });

          //构造地点查询类
          this.placeSearch = new AMap.PlaceSearch({
            map: this.GaoDeMap,
          });

          // 当选中某条搜索记录时触发
          this.autoComplete.on("select", this.selectAddress);
        })
        .catch((e) => {
          console.log(e);
        });
    },

以上步骤基本可以在页面展示高德地图

4、 标记点封装

    /** 点标记 */
    createGaoMarker(lnglat) {
      // 创建一个 Marker 实例：
      const marker = new AMap.Marker({
        position: lnglat, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      });

      // 将创建的点标记添加到已有的地图实例：
      this.GaoDeMap.add(marker);
    },

5、画圆形范围

    /** 画圆 */
    createGaoCircle(lnglat) {
      const circle = new AMap.Circle({
        center: lnglat, // 圆心位置
        radius: this.fenceForm.taskScope, // 圆半径
        fillColor: "#fff", // 圆形填充颜色
        strokeWeight: 2, // 描边宽度
        strokeColor: "blue",
        strokeOpacity: 0.8,
      });
      this.GaoDeMap.add(circle);
      this.GaoDeMap.setCenter(lnglat);
      this.GaoDeMap.setFitView();
    },

6、逆地址解析

    /** 逆地址解析 */
    gaoDeGeocoder(lnglat) {
      AMap.plugin("AMap.Geocoder", () => {
        var geocoder = new AMap.Geocoder();
        geocoder.getAddress(lnglat, (status, result) => {
          if (status === "complete" && result.info === "OK") {
            this.GaoDeMap.clearMap();
            this.createGaoMarker(lnglat);
            this.createGaoCircle(lnglat);
            // result为对应的地理位置详细信息
            this.fenceForm.taskAddress = result.regeocode.formattedAddress;
            this.currentlnglat = lnglat;
            this.fenceForm.taskLatitude = lnglat.lat; //经度
            this.fenceForm.taskLongitude = lnglat.lng; //维度
          }
        });
      });
    },

7、正地址解析

    /** 正向地址解析 */
    gaoDeDueGeocoder(keyWord) {
      AMap.plugin("AMap.Geocoder", () => {
        var geocoder = new AMap.Geocoder();

        geocoder.getLocation(keyWord, (status, result) => {
          if (status === "complete" && result.info === "OK") {
            const lnglat = result.geocodes[0].location;
            // result中对应详细地理坐标信息
            this.GaoDeMap.clearMap();
            this.createGaoMarker(lnglat);
            this.createGaoCircle(lnglat);
            // result为对应的地理位置详细信息
            this.fenceForm.taskAddress = keyWord;
            this.currentlnglat = lnglat;
            this.fenceForm.taskLatitude = lnglat.lat; //经度
            this.fenceForm.taskLongitude = lnglat.lng; //维度
          }
        });
      });
    },

8、输入提示功能

在地图load事件中绑定输入框id（上面初始化实例有相应代码以及输入框使用el-autocomplete）

          // 搜索框自动完成类
          this.autoComplete = new AMap.AutoComplete({
            input: "taskAddress",
          });

          //构造地点查询类
          this.placeSearch = new AMap.PlaceSearch({
            map: this.GaoDeMap,
          });

          // 当选中某条搜索记录时触发
          this.autoComplete.on("select", this.selectAddress);

    /** 地址选择 */
    selectAddress(e) {
      this.GaoDeMap.clearMap();
      this.createGaoMarker(e.poi.location);
      this.createGaoCircle(e.poi.location);
      // result为对应的地理位置详细信息
      this.fenceForm.taskAddress = e.poi.name;
      this.currentlnglat = e.poi.location;
      this.fenceForm.taskLatitude = e.poi.location.lat; //经度
      this.fenceForm.taskLongitude = e.poi.location.lng; //维度
    },

    querySearchAsync1(val, cb) {
      // 实例化AutoComplete
      // let options = {
      //   citylimit: true, // 强制在限定城市内搜索
      //   city: this.storeForm.area[1], // 限制城市
      // };
      let autoComplete = new AMap.AutoComplete();
      // 根据关键字进行搜索
      autoComplete.search(val, (status, result) => {
        // 搜索成功时，result即是对应的匹配数据
        let resAddress = [];
        if (status == "complete") {
          resAddress = result.tips;
          // 将要选择后显示的值字段名设置为value，其他字段名会选择后不回显名称
          for (const item of resAddress) {
            item.detailAddress = `${item.district}${item.address}`;
          }
          cb(resAddress);
        } else {
          this.gaoDeDueGeocoder(val);
          cb([]);
        }
      });
    },
    handleSelect1(item) {
      this.fenceForm.taskAddress = item.detailAddress + item.name;
      this.fenceForm.addrPoint = item.location;
      this.currentPoint = item.location;
      this.fenceForm.taskLatitude = item.location.lat; //经度
      this.fenceForm.taskLongitude = item.location.lng; //维度
      this.GaoDeMap.clearMap(); // 清空所有标记点

      this.createGaoMarker(item.location); // 添加标记点

      this.createGaoCircle(item.location); // 创建圆形
    },