vue引入高德地图，poi搜索，点击选点，标记点

1.在public/index.html,用script标签引入的，如果需要poi搜索务必加上密匙和plugin=AMap.Autocomplete,AMap.PlaceSearch，否则不会显示

    <script type="text/javascript">
      window._AMapSecurityConfig = {
          securityJsCode:'你的密匙',
      }
</script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script> 
    <script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>

2.上代码

<template>
  <div>
    <el-input
      id="keyword"
      v-model="addres"
      placeholder="输入关键字选取地点"
      style="width: 300px"
    />
    <div id="container_jinfeishuju"></div>
  </div>
</template>
<script>
export default {
  props: {
    form: Object,
  },
  data() {
    return {
      addres: "",
      districtList: "",
      cityCode: "",
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    //  递归查询城市编码换算区域编码
    recursion(list, code) {
      for (let i = 0; i < list.length; i++) {
        if (list[i].citycode == code) {
          this.cityCode = list[i].adcode;
          return ;
        }
        if (list[i].districtList && list[i].districtList.length > 0) {
          this.recursion(list[i].districtList, code);
        }
      }
    },
    // 初始化加载地图
    initMap() {
      let that = this;
      let map = new AMap.Map("container_jinfeishuju", {
        center: [113.618917, 34.748348],
        zoom: 13,
        resizeEnable: true,
      });
      //实时路况图层
      let trafficLayer = new AMap.TileLayer.Traffic({
        zIndex: 10,
      });
      // 将创建的点标记添加到已有的地图实例：
      map.add(trafficLayer); //添加图层到地图
      map.on("click", function (ev) {
        console.log(ev);
        that.marker(ev.lnglat.lng, ev.lnglat.lat, map, false);
        that.getCode(ev.lnglat.lng, ev.lnglat.lat, false, "");
      });
      // 父组件传值解析地址 并回显
      if (that.form.id !== 0) {
        that.addres = that.form.placeName;
        that.marker(that.form.placeLon, that.form.placeLat, map, true);
      }

      AMap.plugin(
        ["AMap.Autocomplete", "AMap.PlaceSearch", "AMap.DistrictSearch"],
        function () {
          let autoOptions = {
            city: "郑州", //城市，默认全国
            input: "keyword", //使用联想输入的input的id
            extensions: "all",
          };
          let autocomplete = new AMap.Autocomplete(autoOptions);
          let placeSearch = new AMap.PlaceSearch({
            city: "郑州",
            //   map: map,
            extensions: "base",
          });
          AMap.event.addListener(autocomplete, "select", function (e) {
            console.log(e);
            //TODO 针对选中的poi实现自己的功能
            placeSearch.setCity(e.poi.adcode);
            placeSearch.search(e.poi.name);
            that.getCode(
              e.poi.location.lng,
              e.poi.location.lat,
              true,
              e.poi.name
            );
            //   that.$emit("MapObj", obj);
            that.marker(e.poi.location.lng, e.poi.location.lat, map, true);
          });
          // 获取城市编码和区域编码
          let districtSearch = new AMap.DistrictSearch({
            // 关键字对应的行政区级别，country表示国家
            subdistrict: 2,
            level: "country", //查询行政级别为 市
            extensions: "all",// 基础信息base,all是返回信息
          });
          districtSearch.search("中国", function (status, result) {
            // 查询成功时，result即为对应的行政区信息
            that.districtList = result.districtList[0].districtList;
            console.log(status, result, "区域");
          });
        }
      );
    },
    // 解析地址
    getCode(lng, lat, type, name) {
      let that = this;
      let district = null;
      AMap.plugin(["AMap.Geocoder", "AMap.DistrictSearch"], function () {
        // 引入 Geocoder 逆向地理编码插件，把经纬度转为地址
        const geocoder = new AMap.Geocoder({
          radius: 1000, // 以给定坐标为中心点，单位：米。取值范围：0-3000。默认值：1000
          extensions: "all", // 返回信息的详略。默认值：base，返回基本地址信息；取值为：all，返回地址信息及附近poi、道路、道路交叉口等信息
          batch: true,
        });
        const lnglat = [lng, lat];
        console.log(lnglat);
        geocoder.getAddress(lnglat, async (status, result) => {
          await that.recursion(
            that.districtList,
            result.regeocode.addressComponent.citycode
          );
          // 传入经纬度，根据给定坐标进行解析，把经纬度转为地址
          let obj = {
            placeName: type ? name : result.regeocode.pois[0].name,
            cityCode: that.cityCode,
            placeLon: lng,
            placeLat: lat,
          };

          that.$emit("MapObj", obj);
          that.addres = type ? name : result.regeocode.pois[0].name;
        });
      });
    },
    // 根据点击事件或者搜索事件生成坐标点
    marker(lat, lng, map, type) {
      let marker = new AMap.Marker({
        position: new AMap.LngLat(lat, lng), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "当前位置",
      });
      if (type) {
        map.setCenter([lat, lng]);
      }
      map.clearMap(); //清除所有遮罩物
      map.add(marker);
    },
  },
};
</script>
<style scoped>
#container_jinfeishuju {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 500px;
  margin-top: 15px;
}
#keyword {
  z-index: 1000000000000000;
}
</style>
<style>
.auto-item {
  font-size: 14px;
  letter-spacing: 1px;
}
</style>