vue 高德地图 点击/搜索 获取坐标点信息

效果图

依赖

npm install vue-amap -S

mian.js文件

import AMap from 'vue-amap'
Vue.use(AMap)
AMap.initAMapApiLoader({
  key: '*******************', // 高德 key
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4'
})
window._AMapSecurityConfig = {
  securityJsCode: '*******************' // 高德 securityJsCode
}

map.vue

<template>
    <div>
      <el-select
        class="tipInput"
        v-model="tipInput"
        filterable
        remote
        reserve-keyword
        clearable
        placeholder="输入地点进行搜索"
        :remote-method="remoteMethod"
        :loading="loading"
        @change="tipChange">
        <el-option
          v-for="item in tips"
          :key="item.id"
          :label="item.name"
          :value="item.id">
          <span style="float: left">{{ item.name }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.district }}</span>
        </el-option>
        <template slot="prefix">
          <i class="el-icon-search el-input__icon"></i>
        </template>
      </el-select>
      <div id="container" style="width:100%;height:90vh" />
    </div>
</template>

<script>
// 绘制线路需要的坐标
export default {
  data () {
    return {
      tipInput: '', // 搜索框内容
      address: '', // 定位地址名称
      loading: false, // 远程搜索loading
      map: undefined, // map
      marker: undefined, // marker
      tips: [], // 查询到的地址
      coord: [] // 点坐标
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initMap()
    })
  },
  methods: {
    // 初始化地图
    initMap () {
      const mapObj = {resizeEnable: true, zoom: 10}
      this.map = new AMap.Map('container', mapObj)
      this.map.setDefaultCursor('default') // 设置鼠标指针样式
      this.map.on('click', this.onMapClick)
    },
    // 标记点
    onMarker () {
      if (this.marker) this.map.remove(this.marker)
      this.marker = new AMap.Marker({
        map: this.map,
        position: this.coord
      })
      this.marker.setLabel({
        direction: 'top',
        offset: new AMap.Pixel(10, 0), // 设置文本标注偏移量
        content: '<div>' + this.address + '</div>' // 设置文本标注内容
      })
    },
    // 鼠标点击地图
    onMapClick (e) {
      this.tipInput = ''
      this.coord = [e.lnglat.lng, e.lnglat.lat]
      this.getAddress()
    },
    // 查询
    remoteMethod (query) {
      if (query !== '') {
        this.loading = true
        const that = this
        this.map.plugin('AMap.Autocomplete', () => {
          // 实例化Autocomplete
          let autoOptions = {
            city: '全国'
          }
          let autoComplete = new AMap.Autocomplete(autoOptions)
          autoComplete.search(query, function (status, result) {
            that.tips = result.tips || []
            that.loading = false
          })
        })
      } else {
        this.tips = []
      }
    },
    // 选择搜索到的地址
    tipChange (value) {
      if (!value && this.marker) {
        this.$message.error('未获取到坐标信息,请选择其他地址')
        this.map.remove(this.marker)
        return
      }
      for (const tip of this.tips) {
        if (value === tip.id) {
          if (!tip.location) {
            this.$message.error('未获取到坐标信息,请选择其他地址')
            return
          }
          this.map.setZoom(16)
          this.map.setCenter(tip.location)
          this.coord = [tip.location.lng, tip.location.lat]
          this.getAddress()
          break
        }
      }
    },
    // 经纬度转化为详细地址
    getAddress () {
      let that = this
      this.map.plugin('AMap.Geocoder', function () {
        let geocoder = new AMap.Geocoder({
          radius: 100,
          extensions: 'all'
          // extensions: 'base'
        })
        geocoder.getAddress(that.coord, function (status, result) {
          if (status === 'complete' && result.info === 'OK') {
            let address = result.regeocode.formattedAddress
            that.address = address
            that.onMarker()
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tipInput {
  position: absolute;
  float: left;
  z-index: 999;
  left: 2%;
  top: 2%;
  width: 300px;
}
</style>