js高德地图中地址查询定位

高德地图自带的，根据用户输入的地址，进行模糊搜索，用户进行选择定位
用vue以及element-ui实现的，

查询搜索功能

页面部分布局

 <div class="location-wrap">
    <div id="location"></div>
    <div class="search">
      <el-input
        id="tip-input"
        size="small"
        class="search-input"
        placeholder="请输入地址"
        prefix-icon="el-icon-search"
        v-model="address"
        :clearable="true"
        @input="mapLocation"
       >
      </el-input>
      <ul class="list" v-show="searchMsg">
        <li v-for="(item, index) in list" :key="index" @click="selectAddress(item)">{{item.name}}</li>
     </ul>
  </div>
</div>

js部分
在mounted时候，加载地图

<script>
import MP from '这个加载地图文件，访问也在简书中'

let map = '' // 定义地图
let marker = '' // 定义一个标记
export default {
  data () {
    return {
      mapKey: '这是你的地图key',
      address: '', // 输入地址
      list: [], // 模糊搜索的list
      searchMsg: false, // list下拉框的显示隐藏
      lnglat: {} // 存储点击的经纬度
    }
  },
  created () {
  },
  async mounted () {
    await MP (this.mapKey)
    this.map()
    this.clickMap() // 地图上的点击事件
  },
  methods: {
   // 将获取到的地址传回到父组件
    handleChange (val) {
      this.$emit('address', val)
    },
   // 下拉框中的选择
    selectAddress (val) {
      this.address = `${val.district}${val.name}`
      this.handleChange(`${val.district}${val.name}`)
    },
   // 初始化地图
    map () {
      map = new AMap.Map('location', {
         resizeEnable: true,
         zoom: 14
      })
    },
   // input事件
    mapLocation () {
      // 使用高德地图的自动补全和搜索的功能
      map.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], () => {
        // 实例化Autocomplete
        var autoOptions = {
          city: '全国'
        }
        let autoComplete = new AMap.Autocomplete(autoOptions)
        autoComplete.search(this.address, (status, result) => {
          if (result && result.info === 'OK') {
            this.list = result.tips
            this.searchMsg = true
            this.placeSearch(this.list.length && this.list[0].name)
          }
        })
      })
    },
    placeSearch (value) {
      let placeSearch = new AMap.PlaceSearch({
        city: '全国',
        map: map
      })
      placeSearch.search(value)
    },
   // 地图上的点击事件，根据点击位置，记一个mark,点击新的位置，去掉之前的mark,记录最新的
    clickMap () {
      map.on('click', (e) => {
        if (JSON.stringify(this.lnglat) !== '{}') {
          this.mark('remove', this.lnglat)
        }
        this.lnglat = e.lnglat
        this.mark('add', e.lnglat)
        map.plugin(['AMap.Geocoder'], () => {
          let geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: 'all'
          })
          geocoder.getAddress([e.lnglat.lng, e.lnglat.lat], (status, result) => {
            if (result && result.info === 'OK') {
              this.address = `${result.regeocode.formattedAddress}`
              this.handleChange(`${result.regeocode.formattedAddress}`)
              this.close()
            }
          })
        })
      })
    },
   // 标记的新增和删除
    mark (type, value) {
      if (type === 'remove') {
        return map.remove(marker)
      }
      marker = new AMap.Marker({
        position: new AMap.LngLat(value.lng, value.lat),
        title: '北京'
      })
      map.add(marker)
    }
  }
}
</script>

css样式，使用的less

.location-wrap {
  position: relative;
  width: 100%;
  height: 500px;
}
#location {
  width: 100%;
  height: 100%;
}
.search {
  position: absolute;
  right: 10px;
  top: 10px;
  .el-input {
    width: 400px;
  }
  .list {
    width: 380px;
    // height: 300px;
    background: #ffffff;
    padding: 0 10px;
    color: #333;
    font-size: 14px;
  }
  li {
    line-height: 40px;
    cursor: pointer;
  }
}

提示：高德地图jsapi的地址