vue前端实现高德api实现标点，POI搜索

<template>
  <div class="home_div">
    <!-- <div class="mapSearch"> -->
    <!-- <el-input
        placeholder="请输入你要查找的关键词"
        v-model="userInput"
        id="tishikuang"
        style="width: 200px"
      ></el-input>
      <div style="margin: 0 20px">
        当前经纬度：<span v-if="lng != ''">{{ lng + "，" + lat }}</span>
      </div> -->
    <!-- <el-cascader
        v-model="selectedOptions"
        :options="schoolList"
        @change="handleSelectionChange"
        placeholder="请选择"
        clearable
        ref="cascader"
      ></el-cascader>
      <el-button type="primary" @click="biu">保存</el-button> -->
    <!-- </div> -->

    <div id="container"></div>
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  securityJsCode: "", //在这里填写你的安全密钥
};

export default {
  name: "MapContainer",
  props: {
    knownLnglat: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      MapGeolocation: null,
      mouseTool: null,
      polygon: null,
      polyEditor: null,
      autoOptions: {
        input: "tishikuang", //绑定的搜索关键字的input标签ID，用这个注册
      },
      auto: null,
      userInput: "", //绑定的搜索关键字的的内容
      placeSearch: null,
      searchHere: null, //根据搜索组件搜索到以后的地点信息
      lng: "",
      lat: "",
      options: [], // 可选数据列表，详见组件文档
      selectedOptions: [], // 当前已选数据
      schoolForm: [],
      marker: null,
      AMap: null,
      Geocoder: null,
    };
  },
  created() {},
  mounted() {
    this.initAMap();
  },
  computed: {
    schoolList() {
      return this.$store.state.SchoolList;
    },
  },
  methods: { 
    initAMap() {
      AMapLoader.load({
        key: "", //设置您的key
        version: "2.0",
        plugins: [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.Geolocation",
          "AMap.ControlBar",
          "AMap.CitySearch",
          "AMap.HawkEye",
          "AMap.MapType",
          "AMap.AutoComplete",
          "AMap.PlaceSearch",
          "AMap.Geocoder",
        ],
        AMapUI: {
          version: "1.1",
          plugins: [],
        },
        Loca: {
          version: "2.0",
        },
      })
        .then((AMap) => {
          this.AMap = AMap;
          this.MapGeolocation = new AMap.Map("container", {
            viewMode: "3D",
            zoom: 15,
            zooms: [2, 22],
          });
          this.MapGeolocation.addControl(new AMap.Scale());
          this.MapGeolocation.addControl(
            new AMap.ToolBar({
              position: {
                top: "110px",
                right: "40px",
              },
            })
          );
          this.MapGeolocation.addControl(
            new AMap.Geolocation({
              enableHighAccuracy: true, //是否使用高精度定位，默认:true
              timeout: 10000, //超过10秒后停止定位，默认：5s
              position: "RB", //定位按钮的停靠位置
              offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
              zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
            })
          );
          this.MapGeolocation.addControl(
            new AMap.ControlBar({
              position: {
                top: "10px",
                right: "10px",
              },
            })
          );
          this.MapGeolocation.on("click", (e) => {
            const lnglat = e.lnglat;
            if (!this.marker) {
              // 如果还不存在点标记，则创建新的点标记并添加到地图上
              this.marker = new AMap.Marker({
                position: lnglat,
                map: this.MapGeolocation,
              });
            } else {
              // 如果已经存在点标记，则更新其位置
              this.marker.setPosition(lnglat);
            }
            this.$emit("MapClick", lnglat);
          }); // 已知的经纬度
          if (this.knownLnglat.length > 0) {
            this.marker = new AMap.Marker({
              position: this.knownLnglat,
              map: this.MapGeolocation,
            });
          }
          this.placeSearch = new AMap.PlaceSearch({
            map: null,
            pageSize: 1,
            pageIndex: 1,
          }); //构造地点查询类
          
          this.Geocoder = new AMap.Geocoder();
        })
        .catch((e) => {
          console.log(e);
        });
    },
    
    handleSelectionChange(name) {
      const keyword = name;
      // 执行高德地图 POI 搜索，详见文档
      this.placeSearch.search(keyword, (status, result) => {
        if (status === "complete") {
          if (result.poiList && result.poiList.pois) {
            this.schoolForm = result.poiList.pois;
            this.$emit("schoolPos", this.schoolForm);

            const customPoint = [
              result.poiList.pois[0].location.lng,
              result.poiList.pois[0].location.lat,
            ];
            this.removeMarker();
            this.marker = new this.AMap.Marker({
              position: customPoint,
              map: this.MapGeolocation,
            });
            this.MapGeolocation.setCenter(customPoint);
            this.MapGeolocation.add(this.marker);
            this.MapGeolocation.setFitView();
          }
        }
      });
    },
    removeMarker() {
      // 移除标记点
      if (this.marker) {
        this.marker.setMap(null);
        this.marker = null;
      }
    },
    GeocoderLocation(lnglat) {
      this.Geocoder.getAddress(lnglat, (status, result) => {
        if (status === "complete") {
          // result为对应的地理位置详细信息
          this.$emit("AddressDetil", result.regeocode.formattedAddress);
          this.handleSelectionChange(result.regeocode.formattedAddress)
        }
      });
    },
  },
  beforeDestroy() {
    if (this.MapGeolocation) {
      this.removeMarker();
      this.MapGeolocation.destroy();
    }
  },
};
</script>
<style scoped>
.home_div {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: calc(100% - 50px);
  position: relative;
}

#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
}
.mapSearch {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
</style>