This is just one button, selectable button with pop-up box

<div style="display:inline-block; color:#409EFF; Cursor :pointer"> < I class="el-icon-location"></ I >< span @click=" openSetdi "></ span> </div>Copy the code

Method of displaying a pop-up box

opensetdi(){
    this.$store.commit('setgdDialogVisible',true);
},
Copy the code

Autonavi Metro pop-up box HTML

< el - dialog title = "select address" : visible. The sync = "this. $store. State. GdDialogVisible" : before - close = "addressclosedialog" width = "30%"  center> <gdmap></gdmap> <span class="dialog-footer" style="height: 60px; display: block;" ></span> </el-dialog>Copy the code

Pop-up Close

addressclosedialog(){
    this.$store.state.gdDialogVisible=false;
},
Copy the code
import gdmap from '.. /components/Map' components:{ 'gdmap':gdmap },Copy the code

Vue-amap installation and use

Vue-amap installation and use documentation

NPM install

npm install vue-amap --save
Copy the code

Vue – amap main. Use js

import VueAMap from 'vue-amap' Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key: 'b205a764fd89262a00033ccc515f623c', plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.Geocoder','AMap.Geolocation','AMap.MarkerClusterer'], // Default Autonavi SDK version is 1.4.4V: '1.4.4'});Copy the code

Create the component map.vue to use

<!--
 * @Author: shh
 * @Date: 2021-04-02 10:31:58
 * @LastEditTime: 2021-05-06 18:40:52
 * @LastEditors: Please set LastEditors
 * @Description: 高德地图定位插件
 * @FilePath: 
-->

<template>
  <div
    class="amap-page-container"
    style="width: 95%; height:400px;margin:0 auto;margin-bottom:100px"
  >
    <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>
    <p>{{ address }}</p>
    <p>{{ center }}</p>
    <span class="dialog-footer">
      <button type="button" class="el-button el-button--default" @click="sendcenaddress(1)">
        <span>取 消</span>
      </button>
      <button
        data-v-5d351510
        type="button"
        class="el-button el-button--primary"
        @click="sendcenaddress"
      >
        <span>确 定</span>
      </button>
    </span>
  </div>
</template>
<script>
import { AMapManager } from 'vue-amap'
let amapManager = new AMapManager()
export default {
  data() {
    const self = this
    return {
      searchOption: {
        //根据定位获取当前城市
        city: '上海',
        citylimit: false,
      },
      lng: '',
      lat: '',
      address: '',
      city: '',
      province: '',
      granaryCounty: '',
      granaryAddress: '',
      marker: '',
      amapManager,
      zoom: 12,
      center: [121.59996, 31.197646],
      events: {
        init: (o) => {
          o.getCity((result) => {
            // console.log(result);
            // this.searchOption.city=result.city
          })
        },
        moveend: () => {},
        zoomchange: () => {},
        click: (e) => {
          debugger
          //   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.city = result.regeocode.addressComponent.city
              self.province = result.regeocode.addressComponent.province
              self.granaryCounty = result.regeocode.addressComponent.district
              self.granaryAddress = result.regeocode.addressComponent.township
              self.$store.commit('setgranaryCity', self.city)
              self.$store.commit('setgranaryProvince', self.province)
              self.$store.commit('setgranaryCounty', self.granaryCounty)
              self.$store.commit('setgranaryAddress', self.granaryAddress)
            } else {
              log.error('根据经纬度查询地址失败')
            }
          })
        },
      },
      plugin: [
        'ToolBar',
        {
          pName: 'MapType',
          defaultType: 0,
          events: {
            init(o) {
              //   console.log(o);
            },
          },
        },
      ],
      plugin: [
        {
          pName: 'Geolocation',
          events: {
            init(o) {
              debugger
              // o 是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                // console.log(JSON.stringify(result));
                if (result && result.position) {
                  debugger
                  self.lng = result.position.lng
                  self.lat = result.position.lat
                  self.address = result.formattedAddress
                  self.center = [self.lng, self.lat]
                  self.city = result.addressComponent.city
                  self.province = result.addressComponent.province
                  self.granaryCounty = result.addressComponent.district
                  self.granaryAddress = result.addressComponent.township
                  self.$store.commit('setgranaryCity', self.city)
                  self.$store.commit('setgranaryProvince', self.province)
                  self.$store.commit('setgranaryCounty', self.granaryCounty)
                  self.$store.commit('setgranaryAddress', self.granaryAddress)
                  //   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: {
    sendcenaddress(inde) {
      debugger
      if (inde == 1) {
        this.$store.commit('setmapcenter', '')
        this.$store.commit('setmapaddress', '')
        this.$store.commit('setgdDialogVisible', false)
      } else {
        this.$store.commit('setmapcenter', this.center)
        this.$store.commit('setmapaddress', this.address)
        this.$store.commit('setgdDialogVisible', false)
        this.$store.commit('setgranaryCity', this.city)
        this.$store.commit('setgranaryProvince', this.province)
        this.$store.commit('setgranaryCounty', this.granaryCounty)
        this.$store.commit('setgranaryAddress', this.granaryAddress)
      }
    },
    onSearchResult(pois) {
      debugger
      if (pois.length > 0) {
        debugger
        let { lng, lat, name, location } = pois[0]
        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.city = result.regeocode.addressComponent.city
            that.province = result.regeocode.addressComponent.province
            that.granaryCounty = result.regeocode.addressComponent.district
            that.granaryAddress = result.regeocode.addressComponent.township
            that.$store.commit('setgranaryCity', self.city)
            that.$store.commit('setgranaryProvince', self.province)
            that.$store.commit('setgranaryCounty', self.granaryCounty)
            that.$store.commit('setgranaryAddress', self.granaryAddress)
          } else {
            console.log('根据经纬度查询地址失败')
          }
        })
      }
    },
  },
}
</script>
<style scoped>
.search-box {
  position: absolute;
  top: 25px;
  left: 20px;
}
.amap-page-container {
  position: relative;
}
</style>
Copy the code