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

组件

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: ''
})

export {
  app
}

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

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