使用vue-amap实现地图 搜索 选址 复现地图的功能

首先安装 vue-amap

npm install vue-amap --save

main,js引用

//地图组件
import aMap from 'vue-amap'
Vue.use(aMap)
// 初始化vue-amap
aMap.initAMapApiLoader({
  // 高德key
  key: 'c1491a41ed12637c4aaab4f283a09522',
  // 插件集合 （插件按需引入）
  plugin: [ 'Geolocation', 'AMap.DistrictSearch', 'MarkerClusterer',
    'AMap.Autocomplete', //输入提示插件
    'AMap.PlaceSearch', //POI搜索插件
    'AMap.Scale', //右下角缩略图插件 比例尺
    'AMap.OverView', //地图鹰眼插件
    'AMap.ToolBar', //地图工具条
    'AMap.MapType', //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
    'AMap.PolyEditor', //编辑 折线多，边形
    'AMap.CircleEditor', //圆形编辑器插件
    'AMap.Geolocation', //定位控件，用来获取和展示用户主机所在的经纬度位置
     'AMap.Geocoder'
  ],
  v: '1.4.4'
})

<template>
  <div>
    <div class="amap-page-container">

      <el-amap-search-box
        ref="searchBox"
        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"
      >
        <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 {
  props: {
    centerFater: {
      type: [Array, Object],
      default(){
        return [117.13, 36.67]
      }
    }
  },
  data() {
    let self = this;
    return {
      amapManager,
      zoom: 12,
      input: "",
      markers: [],
      searchOption: {
        city: "济南",
        citylimit: false,
      },
      center: this.centerFater,
      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;
              console.log(self.$refs.searchBox, 'self.$refs.searchBox')
              self.$refs.searchBox.keyword = self.input;
              self.$nextTick(() => {
                self.uploadList=[]
                self.uploadList.push(
                  {
                    'lng':e.lnglat.lng,
                    'lat':e.lnglat.lat,
                    'address':result.regeocode.formattedAddress
                  }
                )
                self.$emit('chind-list',self.uploadList)
              });
            }
          });
        },
      },
      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.uploadList=[]
          this.uploadList.push(
            {
              'lng':pois[0].lng,
              'lat':pois[0].lat,
              'address':pois[0].address +pois[0].name
            }
          )
          console.log(this.uploadList,'子组件发送了')
          this.$emit('chind-list',this.uploadList)
        });
      }
      //这边类似模糊查询 会返回一个数组，我就直接取第一个值了。
      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>

组件调用

 <select-map @chind-list="setInputList" v-if="showFlag" :centerFater="propCenterList"></select-map>
    setInputList(data){
      console.log(data,'父组件获取到了')
      this.form.longitude =data[0].lng
      this.form.latitude =data[0].lat
      this.form.address =data[0].address
    },

// v-if="showFlag"  用于清空子组件的