高德地图初始化、点击定位的方法使用（附相关注释）

大家好，这次使用的是高德地图api的使用，主要讲述了高德地图初始化、点击定位后添加circleMarker的使用方法。

<template>
  <div>
    <div class="search-content">
      <div class="search-button-group">
        <el-form :model="queryForm" ref="form" :inline="true" class="demo-form-inline"
          @keyup.enter.native="searchMapData()">
          <div class="form-item-wrapper">
            <el-input v-model.trim="queryForm.checkAddressText" placeholder="请输入打卡地址" clearable></el-input>
            <el-button type="primary" class="btn-search" @click="searchMapData()">查询</el-button>
          </div>
        </el-form>
      </div>
    </div>
    <div id="container" style="width: 100%;height: 400px;z-index: 99999999;"></div>
  </div>
</template>

<script type="text/javascript">
window._AMapSecurityConfig = {
  securityJsCode: "yourSecurityJsCode",
}
</script>
<script src="https://webapi.amap.com/loader.js"></script>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";

let myMap = null;
let myOtherSetMap = null;
export default {
  name: "OpenMyMap",
  data() {
    return {
      queryForm: { checkAddressText: "" },
      radius: 500, // 默认半径为500米
      nowObj: {},
      saveCircleObj: {},
    };
  },
  mounted() {
    this.clearMap();
    this.initMyMap();
  },
  // 组件销毁前，记得清空地图
  beforeDestroy() {
    this.clearMap();
  },
  methods: {
    clearMap() {
      if (myMap) {
        myMap.destroy();
        myMap = null;
      }
      if (myOtherSetMap) {
        myOtherSetMap = null;
      }
    },
    searchMapData() {
      let that = this;
      AMap.plugin("AMap.PlaceSearch", function () {
        let PlaceSearchOptions = {
          //设置PlaceSearch属性
          city: "广州", //城市
          type: "", //数据类别
          pageIndex: 1, //请求页码，默认1
          pageSize: 10, //每页结果数,默认10
          extensions: "base" //返回信息详略，默认为base（基本信息）
        }
        let MSearch = new AMap.PlaceSearch(PlaceSearchOptions) //构造PlaceSearch类

        MSearch.search(that.queryForm.checkAddressText, (res, d) => {
          console.log("地图查到的结果", res, d.poiList);
          that.nowObj = res;//拿到结果后，即可赋值给相应数组
        }) //关键字查询
      })
    },
    initMyMap() {
      let that = this;
      AMapLoader.reset();
      AMapLoader.load({
        key: "yourkey", // 申请好的Web端开发者Key，首次调用 load 时必填(注册高德账号，注册成功后登录，然后添加 key 值。)
        version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"] //需要使用的的插件列表，如比例尺"AMap.Scale"，支持添加多个如：["...","..."]
      })
        .then((AMap) => {
          myOtherSetMap = AMap
          // 设置地图容器id
          myMap = new AMap.Map("container", {
            viewMode: "3D", // 是否为3D地图模式
            zoom: 12, // 初始化地图级别
            center: [116.56, 39.90923], // 初始化地图中心点位置
          })
          AMap.plugin("AMap.PlaceSearch", function () {
            // 设置PlaceSearch属性
            let PlaceSearchOptions = {
              city: "广州", //城市
              type: "", //数据类别
              pageIndex: 1, //请求页码，默认1
              pageSize: 10, //每页结果数,默认10
              extensions: "base" //返回信息详略，默认为base（基本信息）
            }
            let MSearch = new AMap.PlaceSearch(PlaceSearchOptions) //构造PlaceSearch类

            MSearch.search("白云山", (res, d) => {
              console.log("地图查到的结果", res, d.poiList);
            }) //关键字查询
          })
          // 触发事件的地理坐标，AMap.LngLat 类型
          myMap.on("click", function (ev) {
            if (ev?.lnglat) {
              that.addCircleMaker({
                lat: lnglat.lat,
                lng: lnglat.lng
              });
            }
          });
        })
        .catch((e) => {
          console.log("地图报错的信息", e);
        })
    },
    // 点击地图后添加对应的circleMarker
    addCircleMaker(nowItem) {
      let that = this;
      let center = [nowItem.lng, nowItem.lat]
      let circle = new myOtherSetMap.Circle({
        center: center, // 圆心位置
        radius: Number(that.radius), //半径 圆半径，取值范围[0,50000]
        strokeColor: "#f00", //线颜色
        strokeOpacity: 1, //线透明度
        strokeWeight: 3, //线粗细度
        strokeStyle: "dashed", //轮廓线样式
        fillColor: "#f00", //填充颜色
        fillOpacity: 0.4 //填充透明度
      })
      //圆形 circleMarker 对象添加到 Map
      myMap?.add(circle)
      let saveCircle = {
        center: center,
        radius: that.radius
      }
      that.saveCircleObj = saveCircle;
      //将覆盖物调整到合适视野
      myMap?.setFitView([circle])
      // 设置成功，做自己对应的数据操作。。。
    },
  },
};
</script>

最后，原创不易，如本文对您有所帮助，麻烦点个赞收藏一下谢谢！