vue中引入高德地图获取坐标

package.json文件引入依赖

 "vue-amap": "^0.5.10",

main.js全局使用

// 引入vue-amap高德地图
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
// 初始化vue-amap
VueAMap.initAMapApiLoader({
  // 高德的key
  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'
})

使用组件

点击按钮弹出窗口 
 <el-form-item label="坐标:" prop="lng">
            <span style="margin-right:10px;">{{ pointFrom.lng }},{{ pointFrom.lat }}</span>
            <el-button @click="showPickerDialog=true">拾取坐标</el-button>
          </el-form-item>


<!-- 地图 -->
    <el-dialog
      title="坐标拾取"
      width="800px"
      :visible.sync="showPickerDialog"
      :before-close="onPickerClose"
      :close-on-click-modal="false"
    >
      <el-amap vid="location-picker" :center="center" :zoom="15" :events="mapEvents">
        <el-amap-marker :position="location" />
      </el-amap>

      <div slot="footer">
        <el-button @click="onPickerClose">取 消</el-button>
        <el-button type="primary" @click="confirmLocation">确 定</el-button>
      </div>
    </el-dialog>

 data() {
  return {
   showPickerDialog: false,
      immediatelySave: false,
      center: [120.622233, 31.306421],
      location: [120.622233, 31.306421],
  }
 }
 
 methods: {
 // 取消
  onPickerClose() {
      this.showPickerDialog = false
      this.immediatelySave = false
    },
	
	// 确认
	  confirmLocation() {
      if (this.immediatelySave) {
        this.pointFrom.lng = this.location[0]
        this.pointFrom.lat = this.location[1]
        save(this.pointFrom).then(res => {
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.showPickerDialog = false
          this.immediatelySave = false
        })
      } else {
        this.pointFrom.lng = this.location[0]
        this.pointFrom.lat = this.location[1]
        this.showPickerDialog = false
      }
    },
}