vue高德地图的实现 根据经纬度回显地理位

效果图：

1.首先，下载vue-amap 插件

2.在main.js中引入：

import VueAMap from 'vue-amap'
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: '你自己的key!!!',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.Geocoder','AMap.Geolocation','AMap.MarkerClusterer'],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4'
});

3.在index.html中引入：

<script type="text/javascript" src="https://webapi.amap.com/maps?key=你自己的key!!!&v=1.4.4&plugin=AMap.Geolocation,AMap.Autocomplete,AMap.PlaceSearch,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MapType,AMap.PolyEditor,AMap.Geocoder,AMap.CircleEditor"></script> 

代码：

<template>
  <div class="amap-page-container" style="width: 600px; height:300px;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="workId"
      :amap-manager="amapManager"
      :center="center"
      :zoom="zoom"
      :plugin="plugin"
      :events="events"
      class="amap-demo"
    >
    </el-amap>
    <!-- <p>{{ address }}</p>
    <p>{{ center }}</p> -->
    <div class="footer">
      <Input class="lineinput" v-model.number="lng" disabled></Input>
      <Input class="lineinput" v-model.number="lat" disabled></Input>
      <Input class="lineinput" v-model="address" disabled></Input>
    </div>
    <div class="drawer-footer">
      <Button type="text" @click="cancel">{{ $t("cancel") }}</Button>
      <Button type="primary" @click="findlocation">{{
        $t("sure")
      }}</Button>
    </div>
  </div>
</template>
<script>
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager();
export default {
  props:{
    workId:String
  },
  data() {
    const self = this;
    return {
      locData: {
        longitude: "",
        latitude: "",
        address: "",
        province:"",
        city:"",
        district:""
      },
      searchOption: {
        city: "",//搜索范围 
        citylimit: false, //限制搜索范围
       //city: "", citylimit: false, // 不限制搜索范围搜索，比如想全国搜索				
      },
      lng: "",
      lat: "",
      address: "",
      province:"",
      city:"",
      district:"",
      marker: "",
      amapManager,
      zoom: 12,
      center: [121.59996, 31.197646],
      amapamapDemo:'amapamapDemo',
      events: {
        init: (o) => {
          o.getCity((result) => {
           // console.log(result);
           // this.searchOption.city=result.city            
          });
        },
        moveend: () => {},
        zoomchange: () => {},
        click: (e) => {
          //   console.log(e.lnglat);
          self.lng = e.lnglat.lng;
          self.lat = e.lnglat.lat;
          self.center = [self.lng, self.lat];
          //   console.log(e.lnglat, 1999);

          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;
              self.province=result.regeocode.addressComponent.province
              self.city=result.regeocode.addressComponent.city
              self.district=result.regeocode.addressComponent.district
              if(self.city==""){
                self.city=self.province
              }
              console.log('self',self.province,self.city,self.district);
            //   console.log(self.address, "999地址");
            } else {
              log.error("根据经纬度查询地址失败");
            }
          });
        },
      },
      plugin: [
        "ToolBar",
        {
          pName: "MapType",
          defaultType: 0,
          events: {
            init(o) {
            //   console.log(o);
            },
          },
        },
      ],
      plugin: [
        {
          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: {
    onSearchResult(pois) {
      console.log('pois',pois);
      if (pois.length > 0) {
        let { lng, lat, name ,location} = pois[0];
        this.searchName=pois[0].name
        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);
       // 近来补充  根据经纬度查询地址
        let geocoder = new AMap.Geocoder({});
		let that = this
		geocoder.getAddress(location, function(status, result) {
		console.log(status, result)
	   if (status === "complete" && result.regeocode) {
		 that.address = result.regeocode.formattedAddress;
     that.province=result.regeocode.addressComponent.province
     that.city=result.regeocode.addressComponent.city
     that.district=result.regeocode.addressComponent.district
     if(that.city==""){
      that.city=that.province
     }
      console.log('that',that.province,that.city,that.district);
		} else {
		console.log("根据经纬度查询地址失败");
		}
	   });
      }
    },
     //取消
    cancel() {
      this.lng = "";
      this.lat = "";
      this.address = "";
      this.searchOption.city=""
      // map.clearOverlays();
    },
    findlocation() {
      // console.log('this.lng,this.lat,this.address',this.lng,this.lat,this.address);
      this.locData.longitude=this.lng
      this.locData.latitude=this.lat
      this.locData.address=this.address
      this.locData.province=this.province
      this.locData.city=this.city
      this.locData.district=this.district
      this.$emit("findlocdata", this.locData);
      this.lng = "";
      this.lat = "";
      this.address = "";
      this.searchOption.city=""
      // map.clearOverlays();
    },


  },
};
</script>
<style scoped lang="less">
.search-box {
  position: absolute;
  top: 25px;
  left: 20px;
}
.amap-page-container {
  position: relative;
  /* margin-bottom: 20px; */
}
.footer {
  margin-top: 10px;
  text-align: center;
  width: 600px;
}
.drawer-footer {
  margin-top: 10px;
  text-align: right;
  position: relative;
  border: 0;
}
.lineinput ivu-input-wrapper ivu-input-wrapper-default ivu-input-type-text ivu-input-wrapper-disabled{
  width: 100%!important;
}
/deep/.amap-copyright {
    display: none !important;
}
/deep/.amap-logo {
    display: none!important;
}
</style>

 根据经纬度回显坐标：

<template>
 <div class="myIndexWrap">
  <!-- 根据地址信息显示地图位置 -->
  <div class="addrMapWrapper">
   <div class="addrWrapper">
    <!-- <estimated-info class="showMapBox" :center="displayData" :labelInfo="preMessage"/> -->
    <!-- <estimated-info class="showMapBox"/> -->
    <div class="showMapWrapper">
    <el-amap
    vid="maprun"
    :zoom="zoom"
    :plugin="plugin"
    :events="events"
    :center="center"
    >
    <el-amap-marker vid="marker" :position="center">
    </el-amap-marker>
  </el-amap>
 </div>
   </div>
  </div>
 </div>
</template>
<script>
export default {
  props: {
    center:Array,
  },
 components: {
//   estimatedInfo
 },
 data() {
  return {
    isResue:true,
    geocoder: '',
   //插件集合
   plugin: [
    // 工具条
    {
     pName: "ToolBar",
     positon: "LB"
    },
   ],
   events: {
    
   },
   zoom: 18,
   loaded: false,
   markers:[ ],
  };
 },
 methods:{
     init(map) {
     // 这里通过高德 SDK 完成。
     this.geocoder = new AMap.Geocoder({
      radius: 1000,
      extensions: "all",
      city: "全国"
     });
    },

 },
 computed:{
   
 },
 mounted(){
    this.getMapList()
    this.init()
     
 },
  activated(){
  },
watch: {
 
};
</script>
<style scoped lang="less">
.myIndexWrap {
//  width: 900px;
//  min-width: 1000px;
 height: auto;
 display: flex;
 flex-flow: column;
//  h3 {
//   padding-left: 50px;
//  }
 // 地图标记
 .addrMapWrapper {
  .addrWrapper{
   margin-left: 100px;
  }
 }
}
/deep/.amap-copyright {
    display: none !important;
}
/deep/.amap-logo {
    display: none!important;
}
.showMapWrapper {
 width: 900px;
 height: 400px;
//  border: 1px solid #999;
}
/deep/.amap-copyright {
    display: none !important;
}
/deep/.amap-logo {
    display: none!important;
}
/deep/.amap-marker-label {
    // position: absolute;
    z-index: 2;
    background-color: white;
    white-space: nowrap;
    cursor: default;
    padding: 3px;
    font-size: 12px;
    line-height: 14px;
    border: 0;
}
</style>