vue实现高德地图选择经纬度

全部代码（把密钥和key替换可直接运行）

<template>
<el-dialog
      title="选择经纬度"
      :visible.sync="isShow"
      width="70%"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div>
        <div style="margin-bottom: 10px">
          <el-select
            v-model="keywords"
            filterable
            remote
            reserve-keyword
            placeholder="请输入地址"
            :remote-method="remoteMethod"
            :clearable="true"
            size="mini"
            @change="currentSelect"
            style="width: 500px"
          >
            <el-option
              v-for="(item, index) in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              class="one-text"
            >
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.district
                }}</span>
            </el-option>
          </el-select>
        </div>
        <div id="container" style="width: 100%; height: 50vh; z-index: 999999999999"></div>
      </div>
</template>   
<script>
import AMapLoader from '@amap/amap-jsapi-loader'

window._AMapSecurityConfig = {
  // 安全密钥
  securityJsCode: '**********************'
}
data(){
return {
map: null,
      // 标记点
      marker: '',
      // 地址逆解析
      geoCoder: null,
      // 搜索提示
      AutoComplete: null,
      // 搜索关键字
      keywords: '',
      // 位置信息
      // 搜索提示信息
      options: [],
      formOne: {
        lng: '0',
        lat: '0',
        address: '0',
        adcode: '' //地区编
      },
}
},
mounted() {
    this.initMap()
  },
methods: {
initMap() {
      AMapLoader.load({
        // 你申请的Key
        key: '*****************',
        version: '2.0',
        // 需要用到的插件
        plugins: ['AMap.Geocoder', 'AMap.AutoComplete']
      })
        .then((AMap) => {
          this.map = new AMap.Map('container', {
            viewMode: '3D', //是否为3D地图模式
            zoom: 17, //初始化地图级别
            center: [118.701973, 37.419047] //初始化地图中心点位置
          })
          //地址逆解析插件
          this.geoCoder = new AMap.Geocoder({
            city: '010', //城市设为北京，默认：“全国”
            radius: 1000 //范围，默认：500
          })
          AMap.plugin('AMap.AutoComplete', () => {
            let autoOptions = {
              city: '010',
              input: 'tipinput',   //下面设置的input的id
              outPutDirAuto: true
            }
            this.AutoComplete = new AMap.AutoComplete(autoOptions)
          })
          //点击获取经纬度;
          this.map.on('click', (e) => {
            // 获取经纬度
            this.formOne.lng = e.lnglat.lng
            this.formOne.lat = e.lnglat.lat
            this.keywords = ''
            setTimeout(() => {
              this.keywords = this.formOne.address
            }, 200)
            // 清除点
            this.removeMarker()
            // 标记点
            this.setMapMarker()
          })
        })
        .catch((err) => {
          // 错误
          console.log(err)
        })
    },
    // 标记点
    setMapMarker() {
      // 自动适应显示想显示的范围区域
      this.map.setFitView()
      this.marker = new AMap.Marker({
        map: this.map,
        position: [this.formOne.lng, this.formOne.lat]
      })
      // 逆解析地址
      this.toGeoCoder()
      this.map.setFitView()
      this.map.add(this.marker)
    },
    // 清除点
    removeMarker() {
      if (this.marker) {
        this.map.remove(this.marker)
      }
    },
    // 逆解析地址
    toGeoCoder() {
      let lnglat = [this.formOne.lng, this.formOne.lat]
      this.geoCoder.getAddress(lnglat, (status, result) => {
        if (status === 'complete' && result.regeocode) {
          this.formOne.address = result.regeocode.formattedAddress
        }
      })
    },
    // 搜索
    remoteMethod(query) {
      if (query !== '') {
        setTimeout(() => {
          this.AutoComplete.search(query, (status, result) => {
            console.log(result.tips)
            this.options = result.tips
          })
        }, 200)
      } else {
        this.options = []
      }
    },
    // 选中提示
    currentSelect(val) {
      // 清空时不执行后面代码
      if (!val) {
        return
      }
      console.log('---------aaaaaasssssssssssss')
      let list = this.options.find(item => item.id == val)
      console.log(list)
      this.formOne = {
        lng: list.location.lng,
        lat: list.location.lat,
        address: list.district + list.address,
        adcode: list.adcode
      }
      // 清除点
      this.removeMarker()
      // 标记点
      this.setMapMarker()
    },
}
</script>