使用vue-amap实现选择地址(web)

原创文章，转载请注明出处
官方文档

安装依赖：cnpm install vue-amap --save

// 引用高德地图组件 main.js
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
//初始化
VueAMap.initAMapApiLoader({
  key: 'your key',
  plugin: ['AMap.PlaceSearch', 'AMap.Scale', 'Geocoder'],//依赖配置，根据自己的需求引入
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4'
});

// 组件封装
<template>
  <div class="content">
    <div class="amap-wrapper">
      <el-amap-search-box
        class="search-box"
        :search-option="searchOption"
        :on-search-result="onSearchResult"
      ></el-amap-search-box>
      <el-amap class="amap-box" :zoom="zoom" :center="center" :events="events" :mapStyle="mapStyle">
        <el-amap-marker v-for="(marker, i) in markers" :key="i" :position="marker"></el-amap-marker>
      </el-amap>
    </div>
    <div class="Y-font-size-20 Y-margin-vertical-top-8">您选择的地址是：{{address}}, 经纬度为：{{lng}} , {{lat}}</div>
    <div class="Y-text-align-right Y-avg-1">
      <el-button type="primary" @click="getLnglat">确 定</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    let _this = this;
    return {
      center: [117.120098, 36.6512], //地图中心点坐标 济南市
      zoom: 12, //初始化地图显示层级
      mapStyle: "amap://styles/8b6be8ec497009e17a708205348b899a", //设置地图样式
      markers: [[117.120098, 36.6512]],
      searchOption: {
        city: "济南",
        citylimit: true,
      },
      address: "济南市",
      lng: 117.120098,
      lat: 36.6512,
      events: {
        init: (o) => {},
        moveend: () => {},
        zoomchange: () => {},
        click: (e) => {
          let { lng, lat } = e.lnglat;
          this.center = [lng, lat];
          this.markers = [[lng, lat]];
          this.lng = lng;
          this.lat = lat;
          // 这里通过高德 SDK 完成。
          var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all",
          });
          geocoder.getAddress([lng, lat], function (status, result) {
            if (status === "complete" && result.info === "OK") {
              if (result && result.regeocode) {
                _this.address = result.regeocode.formattedAddress;
              }
            }
          });
        },
      },
    };
  },

  methods: {
    addMarker: function () {
      this.markers = [];
      let lng = 121.5 + Math.round(Math.random() * 1000) / 10000;
      let lat = 31.197646 + Math.round(Math.random() * 500) / 10000;
      this.markers = [[lng, lat]];
    },
    onSearchResult(pois) {
      let latSum = 0;
      let lngSum = 0;
      if (pois.length > 0) {
        let center = pois[0];
        this.lng = center.lng;
        this.lat = center.lat;
        this.address = center.name;
        this.center = [center.lng, center.lat];
        this.markers = [[center.lng, center.lat]];
      }
    },
    getLnglat() {
      this.$emit("getLnglat", this.lng, this.lat, this.address);
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.search-box {
  position: absolute;
  top: 25px;
  left: 20px;
}
.amap-wrapper {
  width: 100%;
  height: 500px;
  position: relative;
}
</style>

// 父组件调用
<Map @getLnglat="getPosi"></Map>
// js
getPosi(lng, lat, address) {
   console.log(lng);
   console.log(lat);
   console.log(address);
},