vue3.0使用vue-amap插件（定位，搜索查询，根据坐标获取具体地址，marker图标）

这是vue-amap地图引入基本的地图
https://blog.csdn.net/zjingru/article/details/110948556

需求：当进入地图页面，定位到当前位置，显示点坐标，搜索框显示当前坐标的具体位置。点击地图，搜索框显示点击坐标的具体位置，搜索后地图中心点为搜索后的位置。

<template>
  <div>
    <div class="amap-page-container">
    // 搜索的组件 cv就可
      <el-amap-search-box
        class="search-box"
        :search-option="searchOption" //搜索条件
        :on-search-result="onSearchResult"	//搜索回调函数
      ></el-amap-search-box>
      <el-amap	//地图
        ref="map"
        vid="amapDemo"
        :amap-manager="amapManager"
        :center="center"
        :zoom="zoom"
        :plugin="plugin" //地图绑定的插件 初始化的时候会调用
        :events="events"
        class="amap-demo"
      >
    	 //点标记在地图上显示的位置，默认为地图中心点。  只position绑定center就好了	
        <el-amap-marker :position="center"></el-amap-marker>
      </el-amap>
    </div>
  </div>
</template>
<script>
//引入 获取实例
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager();
let Geocoder; //先声明变量，
export default {
  data() {
    let self = this;
    return {
      amapManager,
      zoom: 12,
      input: "",
      markers: [],
      searchOption: {
        city: "杭州",
        citylimit: false,
      },
      center: [120.19, 30.26],
      events: {
        init: (o) => {
          o.getCity((result) => {
            console.log(result);
          });
        },
        moveend: () => {},
        zoomchange: () => {},
        click: (e) => {
          self.center = [e.lnglat.lng, e.lnglat.lat];
          Geocoder.getAddress(self.center, function (status, result) { //根据坐标获取位置
            if (status === "complete" && result.info === "OK") {
              self.input = result.regeocode.formattedAddress;
              self.$refs.searchBox.keyword = self.input;
            } 
          });
        },
      },
      plugin: [
        {
          pName: "Geocoder", //使用AMap.Geocoder插件
          events: {
            init(o) {
               Geocoder = o; // o 则是AMap.Geocoder的实例 对外部的Geocoder变量进行赋值，在任何地方就都可以使用了
               //self.center 具体坐标 （数组格式） ，function 回调函数
               o.getAddress(self.center, function (status, result) {
                      if (status === "complete" && result.info === "OK") {
                        //result.regeocode.formattedAddress就是具体位置
                        self.input = result.regeocode.formattedAddress;
                        //对搜索组件的input进行赋值
                        self.$refs.searchBox.keyword = self.input;
                      }
              });
            },
          },
        },
        {
          showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
          pName: "Geolocation", // AMap-Geolocation 定位插件
          events: {
            init(o) {
          	  //getCurrentPosition 获取当前位置的方法 
          	  //注意 虽然进页面就会调用这个方法，但是data()中center要有默认值，不然会报错
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  let lng = result.position.lng;
                  let lat = result.position.lat;
                  self.center = [lng, lat];
                  self.loaded = true;
                  self.zoom = 14;
                  self.$nextTick();
                }
              });
            },
          },
        },
      ],
    };
  },
  methods: {
  	//点击搜索后触发的事件
    onSearchResult(pois) {
     if (pois.length > 0) {
        this.$nextTick(() => {
          this.$refs.searchBox.keyword = pois[0].name;
        });
      }
      //这边类似模糊查询 会返回一个数组，我就直接取第一个值了。
      this.center = [pois[0].lng, pois[0].lat];
    },
  },
};
</script>
<style scoped>
.amap-page-container {
  width: 100%;
  height: 400px;
  margin-bottom: 20px;
}
</style>
<style>
.el-vue-search-box-container {
  width: 100% !important;
  margin-bottom: 10px;
}
</style>

最后 使用插件千万不要忘记在main.js引入哦~

写的很清晰了 有不明白的可以留言交流哈，最好看文档，文档真的很详细，出错率比较小~