element省市县选择和高德地图点击获取地址经纬度

安装省市县插件

插件地址：www.npmjs.com/package/ele…

安装高德地图插件

npm install -S vue-amap

引入vue-amap

// main.js
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({  
    //高德key  
    key: 'your_key',  
    //插件集合  
    plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.Geocoder'],  
    //高德地图版本  
    v: '1.4.4'
});

页面中使用

<template>
  <div class="order_detail">
    <div class="ipt_list u-f u-f-ac">
      <p class="lable u-f u-f-ac">
        <span class="font14 text_danger" style="margin-right: 3px;">*</span>
        <span class="font14 text_black">所在区域：</span>
      </p>
      <el-cascader
        v-model="addMerFrom.areaCode"
        :options="regionArr"
        @change="handleAreaChange"
        clearable
      >
      </el-cascader>
    </div>
    <div class="ipt_list u-f u-f-ac">
      <p class="lable u-f u-f-ac">
        <span class="font14 text_danger" style="margin-right: 3px;">*</span>
        <span class="font14 text_black">地址：</span>
      </p>
      <el-input
        v-model="addMerFrom.address"
        @change="enterAddress"
        placeholder="请输入地址"
      ></el-input>
    </div>
    <div class="txt_list u-f u-f-ac">
      <p class="lable u-f u-f-ac">
        <span class="font14 text_danger" style="margin-right: 3px;">*</span>
        <span class="font14 text_black">经纬度：</span>
      </p>
      <span class="font14 text_black">{{
        addMerFrom.lng ? addMerFrom.lng + "," + addMerFrom.lat : ""
      }}</span>
    </div>
    <div class="map_box u-f">
      <p class="lable u-f">
        <span class="font14 text_black">点击选择位置：</span>
      </p>
      <el-amap
        ref="map"
        vid="amapDemo"
        :amap-manager="mapFrom.amapManager"
        :center="mapFrom.center"
        :zoom="mapFrom.zoom"
        :events="mapFrom.events"
        class="map"
      >
      </el-amap>
    </div>
  </div>
</template>

<script>
import { regionData, CodeToText } from "element-china-area-data";
import { AMapManager } from "vue-amap";
import VueAMap from "vue-amap";
let amapManager = new VueAMap.AMapManager();

export default {
  data() {
    let that = this;
    return {
      regionArr: regionData,
      addMerFrom: {
        merchant: "",
        areaCode: ["440000", "440300", "440305"],
        area: "广东省深圳市南山区",
        address: "",
        lng: "113.923552",
        lat: "22.528499",
      },
      mapFrom: {
        amapManager,
        zoom: 15,
        center: [113.923552, 22.528499],
        events: {
          click: (e) => {
            let cen = [e.lnglat.lng, e.lnglat.lat];
            that.mapFrom.center = cen;
            that.addMerFrom.lng = e.lnglat.lng;
            that.addMerFrom.lat = e.lnglat.lat;
            that.getAdress(cen);
          },
        },
      },
    };
  },
  methods: {
    handleAreaChange(val) {
      let str = "";
      for (let item of val) {
        str += CodeToText[item];
      }
      this.addMerFrom.areaCode = val;
      this.addMerFrom.area = str;
      this.geoCode(str);
    },
    enterAddress(val) {
      this.geoCode(this.addMerFrom.area + val);
    },
    geoCode(address) {
      AMap.plugin("AMap.Geocoder", () => {
        let geocoder = new AMap.Geocoder();
        geocoder.getLocation(address, (status, result) => {
          if (status === "complete" && result.geocodes.length) {
            let lnglat = result.geocodes[0].location;
            this.addMerFrom.lng = lnglat.lng;
            this.addMerFrom.lat = lnglat.lat;
            this.mapFrom.center = [lnglat.lng, lnglat.lat];
          }
        });
      });
    },
    getAdress(cen) {
      AMap.plugin("AMap.Geocoder", () => {
        let geocoder = new AMap.Geocoder();
        geocoder.getAddress(cen, (status, result) => {
          if (status === "complete" && result.regeocode) {
            let address = result.regeocode.formattedAddress;
            let areaCode = this.handleAreaCode(
              result.regeocode.addressComponent.adcode
            );
            this.addMerFrom.areaCode = areaCode;
            let obj = this.handleAddress(address);
            this.addMerFrom.area = obj.area;            this.addMerFrom.address = obj.address;          }
        });
      });
    },
    handleAreaCode(adcode) {
      let arr = [];
      let two = adcode.slice(0, 2);
      if (two == "81" || two == "82") {
        //香港和澳门
        arr[0] = adcode.slice(0, 2) + "0000";
        arr[1] = adcode;
      } else {
        arr[0] = adcode.slice(0, 2) + "0000";
        arr[1] = adcode.slice(0, 4) + "00";
        arr[2] = adcode;
      }
      return arr;
    },
    handleAddress(add5) {
      let reg = /.+?(省|市|自治区|自治州|县|区)/g;
      let areaArr = add5.match(reg);
      if (areaArr.length > 3) {
        areaArr = areaArr.splice(0, 3);
      }
      let area = "";
      for (let item of areaArr) {
        area += item;
      }
      let address = add5.substring(area.length);
      return { area, address };
    },
  },
};
</script>