准备工作
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-dialog
title="打点"
: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.15
plugins: ['AMap.AutoComplete',
'AMap.PlaceSearch',
'AMap.CitySearch',
'AMap.Geocoder',
'AMap.Geolocation']
}).then((AMap) => {
this.map = new AMap.Map('container', {
//设置地图容器id
viewMode: '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.lng
this.form.lat = e.lnglat.lat
this.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 = true
let that = this
setTimeout(() => {
that.loading = false
that.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 = this
this.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.lng
that.form.lat = result.geocodes[0].location.lat
that.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 = false
this.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（）方法 来销毁地图。不然容易报错