vue-map高德地图(2)输入地名或点击地图获取位置经纬度和地名(组件封装)

使用：

点击按钮打开模态窗：

输入位置（支持模糊搜索）进行搜索，或者点击地图上的某处，进行位置获取。点击确定关闭模态窗，获取位置信息

上代码了~~~

父组件中使用

<template>
<div>
  <a class="get-position" @click="getLocationFlag=true">
    <el-icon class="el-icon-position" />
    获取位置
  </a>
 <get-location
   :get-position-flag="getLocationFlag"
   @close="closePosition"
   @getLocation="getLocation"
  />
</div>
</template>
import getLocation from "../../components/getLocation";
export default{
 components:{
   getLocation   //子组件
 },
 data:{
    return(){
      getLocationFlag: false, //子组件弹窗显示或隐藏
    }
 },
 methods:{
    //todo 这个方法是获取子组件传给父组件中的位置信息 经纬度和位置名称
   getLocation(data) {
      (this.addForm.placeTude = data.location.lat),
        (this.addForm.placeLong = data.location.lng),
        (this.addForm.placeAddr = data.name);
      this.$forceUpdate();
    },
    //todo 关闭子组件方法
   closePosition() {
      this.getLocationFlag = false;
    },
 }
}

获取地理位置的子组件封装

<template>
<el-dialog
  title="获取位置信息"
  :visible.sync="getPositionFlag"
  width="30%"
  :before-close="handleClose">
  <div
    class="amap-page-container"
    style="width: 80%; position: relative; height: 500px; margin: 30px 10%"
  >
    <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"
    >
    </el-amap>
    <div style="display:flex;justify-content:space-between;">
    <div>
    <p>{{ address }}</p>
    <p>{{ center }}</p>
    </div>
    <el-button type='success' size='mini' @click="handleClose" style="height:40px;margin-top:20px">确定</el-button>
    </div>
  </div>

</el-dialog>
</template>
<script>
import { AMapManager } from "vue-amap";

let amapManager = new AMapManager();
export default {
  name:'getPosition',
// 接收父组件传过来的信息
  props:{
    getPositionFlag:{
      type:Boolean,
      default:false
    }
  },
    data() {
    const self = this;
    return {
      locationMsg:{},
      searchOption: {
        // city: "北京", //搜索范围
        // citylimit: true, //限制搜索范围
        city: "",
        citylimit: false, // 不限制搜索范围搜索，比如想全国搜索
      },
      lng: "",
      lat: "",
      address: "",
      marker: "",
      amapManager,
      zoom: 12,
      center: [121.59996, 31.197646],
      events: {
        init: (o) => {
          o.getCity((result) => {
            let par = document.getElementsByClassName("search-box-wrapper")[0];
            par.firstChild.setAttribute(
              "placeholder",
              "您可以在这里输入要搜索的地址"
            );
            //todo 定位到搜索位置
            this.searchOption.city = result.city;
          });
        },
        moveend: () => {},
        zoomchange: () => {},
        click: (e) => {
          self.lng = e.lnglat.lng;
          self.lat = e.lnglat.lat;
          self.center = [self.lng, self.lat];
          let o = amapManager.getMap();
          if (!self.marker) {
            self.marker = new AMap.Marker({
              position: e.lnglat,
            });
            self.marker.setMap(o);
          }
          self.marker.setPosition(e.lnglat);
          let geocoder = new AMap.Geocoder({});
          geocoder.getAddress(e.lnglat, function (status, result) {
            if (status === "complete" && result.regeocode) {
              self.address = result.regeocode.formattedAddress;
            } else {
              console.log.error("根据经纬度查询地址失败");
            }
          });
        },
      },
      plugin: [
        "ToolBar",
        {
          pName: "MapType",
          defaultType: 0,
          events: {
            init(o) {
            },
          },
        },
        {
          pName: "Geolocation",
          events: {
            init(o) {
              // o 是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                // console.log(JSON.stringify(result));
                if (result && result.position) {
                  self.lng = result.position.lng;
                  self.lat = result.position.lat;
                  self.address = result.formattedAddress;
                  self.center = [self.lng, self.lat];
                  //   console.log(self.center, 99666);
                  let o = amapManager.getMap();
                  if (!self.marker) {
                    self.marker = new AMap.Marker({
                      position: self.center,
                    });
                    self.marker.setMap(o);
                  }
                  self.marker.setPosition(self.center);
                }
              });
            },
          },
        },
      ],
    };
  },
  methods: {
      handleClose() {
        console.log(this.center,this.address)
        this.locationMsg.name=this.address
        this.locationMsg.location={
          lng:this.center[0],
          lat:this.center[1]
        }
        // console.log(this.locationMsg,'bbbbbbbb')
        this.$emit('getLocation',this.locationMsg)
        this.$emit('close')
      },
    onSearchResult(pois) {
      if (pois.length > 0) {
        let { lng, lat, name, location,address } = pois[0];
        //?显示
        this.address=address+name
        this.center=location
        this.locationMsg.name=address+name
        this.locationMsg.location=location
        let center = [lng, lat];
        this.lng = lng;
        this.lat = lat;
        this.center = [lng, lat];
        let o = amapManager.getMap();
        if (!this.marker) {
          this.marker = new AMap.Marker({
            position: center,
          });
          this.marker.setMap(o);
        }
        this.marker.setPosition(center);
      }
    },
  },
};
</script>
<style scoped>
::v-deep .el-dialog{
  width: 60% !important;
}
.amap-page-container{
 margin: 0 100px 100px 100px !important; 
}
.search-box {
  position: absolute;
  top: 25px;
  right: 120px;
}
.amap-page-container {
  position: relative;
}
</style>