准备工作
1. 先进入高德开发平台注册登录 
2.进入地图 js Api 按照步骤申请key
3 使用npm安装依赖包 npm i @amap/amap-jsapi-loader –save
4. 高德api 都有说明 下面看下我实现的功能和代码
弹窗地图
1. 初始化地图加载地图将自动定位到您所在城市并显示，点击地图实现了打点获取经纬度和详情地址。
2.输入提示
使用了输入提示插件–在地图 js api 里服务模块里。
3.弹窗组件的全部代码
<template><div class="app-container"><el-dialogtitle="打点":append-to-body="true":visible.sync="isShow"width="940px"top="15px":close-on-click-modal="false":before-close="beforeClose":class="{textAlign:'center'}"><div class="flex-ar mb15"><span>经度： {{ form.lng }}</span><span> 纬度 {{ form.lat }}</span><span> 地址 {{ form.address }}</span></div><div id="container"></div><div class="flex-bt" style="width: 400px;position: absolute;top:125px;left: 50px"><el-select v-model="address" clearable placeholder="请输入关键词" style="width: 400px;" :remote-method="remoteMethod" filterable remote @change="currentSelect" class="one-text" :loading="loading"><el-option v-for="(item,index) in options" :key="index" :label="item.district+item.name" :value="item.district + item.name"><span>{{ item.district }}</span> <span>{{ item.name }}</span></el-option></el-select><el-button type="primary" size="mini" class="ml20" @click="saveInfo">打点保存</el-button></div><span slot="footer" class="dialog-footer"><el-button type="primary" @click="confirmForDestroy">关 闭</el-button></span></el-dialog></div></template><script>import AMapLoader from '@amap/amap-jsapi-loader'window._AMapSecurityConfig = {// 安全密钥securityJsCode: 'edf079xxxxb1fxxxxxx737fe816d'}export default {name: 'amapDialog',data() {return {map: null,marker: '',form: {lng: '',lat: '',address: '',adcode: '' //地区编码},isShow: false,address: '',options: [],loading: false}},mounted() {},methods: {initMap(arr) {AMapLoader.load({key: 'xxxxx', // 申请好的Web端开发者Key，首次调用 load 时必填version: '2.0',// 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ['AMap.AutoComplete','AMap.PlaceSearch','AMap.CitySearch','AMap.Geocoder','AMap.Geolocation']}).then((AMap) => {this.map = new AMap.Map('container', {//设置地图容器idviewMode: '3D',//是否为3D地图模式zoom: 12,center:arr})// 地址逆向解析插件this.geoCoder = new AMap.Geocoder({city: '010', //城市设为北京，默认：“全国”radius: 1000 //范围，默认：500})// 正向地理编码this.geocoder = new AMap.Geocoder({city: this.address})//搜所提示插件this.AutoComplete = new AMap.AutoComplete({ city: '全国' })this.map.on('click', (e) => {if (!e && !e.lnglat) {return}this.form.lng = e.lnglat.lngthis.form.lat = e.lnglat.latthis.removeMarker()this.setMapMarker()})}).catch(e => {console.log(e)})},// 标记点setMapMarker() {if (this.form.lng == '' && this.form.lat == '') {return}// 自动适应显示想显示的范围区域this.map.setFitView()this.marker = new AMap.Marker({map: this.map,position: [this.form.lng, this.form.lat],})this.toGetAddress()this.map.setFitView()this.map.add(this.marker)},//清除点removeMarker() {if (this.marker) {this.map.remove(this.marker)}},// 逆解析地址toGetAddress() {let lnglat = [this.form.lng, this.form.lat]this.geoCoder.getAddress(lnglat, (status, result) => {if (status === 'complete' && result.regeocode) {this.form.address = result.regeocode.formattedAddress}})},//搜索remoteMethod(query) {if (query !== '') {this.loading = truelet that = thissetTimeout(() => {that.loading = falsethat.AutoComplete.search(query, (status, result) => {console.log(result)that.options = result.tips})}, 200)} else {this.options = []}},// 选中提示currentSelect(val) {// 清空时不执行后面代码if (!val) {return}this.toGetCoordinate(val)},//正向解析toGetCoordinate(address) {let that = thisthis.geocoder.getLocation(address, function(status, result) {if (status === 'complete' && result.info === 'OK') {that.initMap([result.geocodes[0].location.lng, result.geocodes[0].location.lat])console.log(result)that.form.lng = result.geocodes[0].location.lngthat.form.lat = result.geocodes[0].location.latthat.form.address = result.geocodes[0].formattedAddress}})},saveInfo() {console.log(this.form.address)if (this.form.address === '') {this.$message.error('打点失败，请手动抓取点')return}this.$emit('genAddressInfo', this.form)},confirmForDestroy() {this.isShow = falsethis.beforeDestroy()},beforeDestroy() {this.map.destroy() //销毁地图},beforeClose(done){done()this.beforeDestroy()}}}</script><style scoped lang="scss">#container {padding: 0px;margin: 0px;width: 900px;height: 650px;}</style>先到这吧下次补全嘻嘻、这是个弹窗，关闭弹窗的时候要销毁地图，通过ref 调beforeDestroy（）方法 来销毁地图。不然容易报错