oil-station/fuintAdmin/src/components/map/mapComponent.vue

<template>
  <div>
    <div style="margin: 0px 0px" ref="pform">
      <div style="display: flex">
        <p style="margin-right: 34px">省市区</p>
        <el-cascader
          v-model="input"
          :options="options"
          clearable
          style="margin-top: 8px"
          @change="changeOption"></el-cascader>
      </div>
      <div style="display: flex">
        <p style="margin-right: 20px">选择区域</p>
        <div id="container" class="container" clearable style="margin-top: 15px"></div>
      </div>
    </div>
    <p>详细地址：<el-input v-model="form.address"
                          placeholder="请输入内容"
                          style="width: 50%"
                          @change="getLngLat"
    ></el-input></p>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import {getClient} from "@/api/staff/client";

export default {
  props:['pform'],
  data(){
    return {
      // 地图实例
      map: null,
      polygons: [],
      // 标记点
      marker: "",
      // 地址逆解析
      geoCoder: null,
      // 搜索提示
      AutoComplete: null,
      // 搜索关键字
      keywords: "",
      // 位置信息
      form: {
        lng: "",
        lat: "",
        address: "",
        adcode: "", //地区编码
      },
      // 搜索节流阀
      loading: false,
      // 搜索提示信息
      options: [],
      option:{
        value:'',
        label:'',
        children:[],
      },
      district:'',
      input:'',
    }
  },
  created() {
    this.form = this.pform;
    this.getOption();
  },
  mounted() {
  },
  methods:{
    pasVal(){
      this.$emit('pform', this.form); // 触发custom-event事件并传递参数
      // this.$refs.pform.pasVal()
    },
    changeOption(val){
      this.remoteMethod(val[2]);
    },
    getOption(){
      let _this = this;
      getClient().then(response => {
        _this.options = response.data.list;
      })
    },
    initAMap() {
      console.log("86",this.pform)
      let _this = this;
      AMapLoader.load({
        key: "b5abec514cab7c71cb0572765131e6fc", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Geocoder", "AMap.AutoComplete","AMap.DistrictSearch","AMap.PlaceSearch","AMap.Autocomplete"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.map = new AMap.Map("container", {
          viewMode: "2D", //是否为3D地图模式
          zoom: 17, //初始化地图级别
          center: [_this.form.lng, _this.form.lat], //初始化地图中心点位置
        });
        // console.log(this.map.center)
        //地址逆解析插件
        this.geoCoder = new AMap.Geocoder({
          city: "010", //城市设为北京，默认：“全国”
          radius: 1000, //范围，默认：500
        });
        // 搜索提示插件
        this.AutoComplete = new AMap.AutoComplete({ city: "全国" });
        // 标记点
        this.setMapMarker();
        //点击获取经纬度;
        this.map.on("click", (e) => {
          // 获取经纬度
          this.form.lng = e.lnglat.lng;
          this.form.lat = e.lnglat.lat;
          // 清除点
          this.removeMarker();
          // 标记点
          this.setMapMarker();
        });
      }).catch(() => {});

    },
    // 标记点
    setMapMarker() {
      // 自动适应显示想显示的范围区域
      this.map.setFitView();
      this.marker = new AMap.Marker({
        map: this.map,
        position: [this.form.lng, this.form.lat],
      });
      // 逆解析地址
      this.toGeoCoder();
      this.map.setFitView();
      this.map.add(this.marker);
    },
    // 清除点
    removeMarker() {
      if (this.marker) {
        this.map.remove(this.marker);
      }
    },
    // 逆解析地址
    toGeoCoder() {
      let lnglat = [this.form.lng, this.form.lat];
      this.geoCoder.getAddress(lnglat, (status, result) => {
        if (status === "complete" && result.regeocode) {
          this.form.address = result.regeocode.formattedAddress;
          this.pasVal()
        }
      });
    },
    // 搜索
    remoteMethod(query) {
      let _this = this;
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          // this.AutoComplete.search(query, (status, result) => {
          //   console.log(result.tips);
          // });
          var opts = {
            subdistrict: 0, //返回下一级行政区
            extensions: "all", //返回行政区边界坐标组等具体信息
            level: "city" //查询行政级别为 市
          };
          this.district = new AMap.DistrictSearch(opts); //行政区查询插件
          //进入就显示整个国家范围
          this.district.search(query, function(status, result) {
            _this.form.lng = result.districtList[0].center.lng
            _this.form.lat = result.districtList[0].center.lat
            _this.toGeoCoder();
            _this.pasVal();
            _this.initAMap();
          });
        }, 200);
      } else {
        // this.form = this.pform;
        this.initAMap();
      }
    },
    async getLngLat(){
      let _this = this;
      // const geocoder = new AMap.Geocoder()
      // // 地址反向查经纬度,cName: 当前选中城市
      // geocoder.getLocation(this.form.address, (status, result) => {
      //   if (status === 'complete' && result.info === 'OK') {
      //     // 经纬度
      //     _this.form.lng = result.geocodes[0].location.lng
      //     _this.form.lat = result.geocodes[0].location.lat
      //     _this.toGeoCoder();
      //     _this.pasVal();
      //     _this.initAMap();
      //   } else {
      //     this.$modal.msgError("定位失败");
      //   }
      // })
      // 地址反向查经纬度,cName: 当前选中城市
      var map = new AMap.Map("container", {
        resizeEnable: true
      });
      // AMap.service(["AMap.PlaceSearch"], function() {
        //构造地点查询类
        var placeSearch = new AMap.Autocomplete({
          input: "tipinput"
        });
        //关键字查询
        placeSearch.search(this.form.address, (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            // 经纬度
            _this.form.lng = result.tips[0].location.lng
            _this.form.lat = result.tips[0].location.lat
            _this.toGeoCoder();
            _this.pasVal();
            _this.initAMap();
          } else {
            this.$modal.msgError("定位失败");
          }
        })
      // });
    },
    // 选中提示
    currentSelect(val) {
      // 清空时不执行后面代码
      if (!val) {
        return;
      }
      this.form = {
        lng: val.location.lng,
        lat: val.location.lat,
        address: val.district + val.address,
        adcode: val.adcode,
      };
      // 清除点
      this.removeMarker();
      // 标记点
      this.setMapMarker();
    },
  }
}
</script>

<style lang="scss" scoped>
  .container {
    width: 500px;
    height: 300px;
  }
</style>