利用Vue-amap实现基于高德地图定位（搜索、地图选址）

组件

<template>
  <div
    class="amap-page-container"
    style="height: 400px; margin-bottom: 200px; background: #ccc"
  >
    <el-amap-search-box
      class="search-box"
      :search-option="searchOption"
      :on-search-result="onSearchResult"
    ></el-amap-search-box>
    <el-amap
      vid="amapDemo"
      :center="center"
      :zoom="zoom"
      class="amap-demo"
      :plugin="plugin"
      :events="events"
    >
      <el-amap-marker
        v-for="(marker, index) in markers"
        :position="marker"
        :key="'marker' + index"
      ></el-amap-marker>
    </el-amap>
    <div class="toolbar" v-if="loaded">
      position: [{{ lng }}, {{ lat }}] address: {{ address }}
    </div>
    <div v-else>正在定位</div>
  </div>
</template>

  <style scoped>
.search-box {
  position: absolute;
  top: 25px;
  left: 20px;
}

.amap-page-container {
  position: relative;
}
</style>

  <script>
module.exports = {
  data: function () {
    let self = this

    return {
      markers: [
        [121.59996, 31.197646],
        [121.40018, 31.197622],
        [121.69991, 31.207649]
      ],
      searchOption: {
        city: '杭州',
        citylimit: false
      },
      zoom: 12,
      loaded: false,
      center: [121.59996, 31.197646],
      plugin: [
        {
          pName: 'Geolocation',
          events: {
            init(o) {
              // o 是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  self.lng = result.position.lng
                  self.lat = result.position.lat
                  self.center = [self.lng, self.lat]
                  self.address = result.formattedAddress
                  self.loaded = true
                  self.$nextTick()
                }
              })
            }
          }
        }
      ],
      address: '',
      events: {
        click(e) {
          let { lng, lat } = e.lnglat
          self.lng = lng
          self.lat = lat

          // 这里通过高德 SDK 完成。
          var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: 'all'
          })
          geocoder.getAddress([lng, lat], function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
              if (result && result.regeocode) {
                self.address = result.regeocode.formattedAddress
                self.$nextTick()
              }
            }
          })
        }
      },
      lng: 0,
      lat: 0
    }
  },
  methods: {
    addMarker: function () {
      let lng = 121.5 + Math.round(Math.random() * 1000) / 10000
      let lat = 31.197646 + Math.round(Math.random() * 500) / 10000
      this.markers.push([lng, lat])
    },
    onSearchResult(pois) {
      let latSum = 0
      let lngSum = 0
      if (pois.length > 0) {
        pois.forEach(poi => {
          let { lng, lat } = poi
          lngSum += lng
          latSum += lat
          this.markers.push([poi.lng, poi.lat])
        })
        let mapcenter = {
          lng: lngSum / pois.length,
          lat: latSum / pois.length
        }
        this.center = [mapcenter.lng, mapcenter.lat]
      }
    }
  },
  watch: {
    address: {
      handler: function (val, oldVal) {
        this.address = val
        this.$emit('sendAddress', this.address)
      },
      // 深度观察监听
      deep: true
    }
  }
}
</script>

main.js的配置文件

import Vue from 'vue'
import 'normalize.css/normalize.css' // A modern alternative to CSS resets
import Element from 'element-ui'
import AMap from 'vue-amap'
import 'element-ui/lib/theme-chalk/index.css'
import '@/styles/index.scss'
import App from './App'
import store from './store'
import router from './router'
import './icons'
import './errorLog'
import './permission'
import imgPicker from './components/ImgPicker'
import MpTable from './components/MpTable'
import FooterBottom from './components/FooterBottom'
import PaginationComponent from './components/PaginationComponent'
import DateRange from './components/DateRange'
import bfapp from './utils/app.js'
import directives from './directive/permission/index' // 注册滚动条加载触发事件v-loadmore绑定

// 富文本
import '../static/UE/ueditor.config.js'
import '../static/UE/ueditor.all.min.js'
import '../static/UE/lang/zh-cn/zh-cn.js'
import '../static/UE/ueditor.parse.min.js'
import '../static/UE/themes/default/css/ueditor.css'

Vue.component('imgPicker', imgPicker)
Vue.component('MpTable', MpTable)
Vue.component('FooterBottom', FooterBottom)
Vue.component('PaginationComponent', PaginationComponent)
Vue.component('DateRange', DateRange)

import * as filters from './filters'

// import roles from '@/directive/permission/index.js'

Vue.use(Element, {
  size: 'medium' // set element-ui default size
})
Vue.use(directives)
Vue.use(AMap)
// 初始化vue-amap
AMap.initAMapApiLoader({
  // 高德key
  key: '16017152a3418aaa3824f2c1d723374d',
  // 插件集合 （插件按需引入）
  // plugin: ['AMap.Geolocation', 'AMap.Autocomplete', 'AMap.PlaceSearch']
  plugin: [
    'AMap.Geocoder',
    'AMap.Autocomplete', // 输入提示插件
    'AMap.PlaceSearch', // POI搜索插件
    'AMap.Scale', // 右下角缩略图插件 比例尺
    'AMap.OverView', // 地图鹰眼插件
    'AMap.ToolBar', // 地图工具条
    'AMap.MapType', // 类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
    'AMap.PolyEditor', // 编辑 折线多，边形
    'AMap.CircleEditor', // 圆形编辑器插件
    'AMap.Geolocation' // 定位控件，用来获取和展示用户主机所在的经纬度位置
  ]
})

Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

Vue.config.productionTip = false

Vue.prototype.$app = bfapp

/* eslint-disable no-new */
const app = new Vue({
  el: '#app',
  router,
  store,
  components: {
    App
  },
  template: '<App/>'
})

export {
  app
}

父组件接收的是最终选择的地址

参考文档：https://elemefe.github.io/vue-amap/#/zh-cn/plugins/geolocation