vue2嵌入高德地图选择地址后显示地址和经纬度

以高德地图为里，申请key，选择js api服务，获取key和密钥.

vue2项目代码引入相关依赖：

npm i @amap/amap-jsapi-loader -S

封装成组件:

<template><div><el-row :gutter="15" class=""><el-col :span="16"><el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="100px" label-position="right"><el-col :span="24"><el-form-item label="关键字搜索" prop="wordkey"><!-- <el-input v-model="dataForm.kqLocation" placeholder="自动带出" clearable :style="{ width: '100%' }" > --><el-input v-model="input" placeholder="请输入内容" id="tipinput"></el-input></el-input></el-form-item></el-col><!-- <el-col :span="24"><el-form-item label="地点" prop="kqLocation"><el-input v-model="dataForm.kqLocation" placeholder="自动带出" clearable :style="{ width: '100%' }" ></el-input></el-form-item></el-col><el-col :span="24"><el-form-item label="经度" prop="kqLongitude"><el-input v-model="dataForm.kqLongitude" placeholder="自动带出" clearable :style="{ width: '100%' }" ></el-input></el-form-item></el-col><el-col :span="24"><el-form-item label="纬度" prop="kqLatitude"><el-input v-model="dataForm.kqLatitude" placeholder="自动带出" clearable :style="{ width: '100%' }" ></el-input></el-form-item></el-col> --></el-form></el-col><el-col :span="16"><div style="width: 100%"><div ref="gaode_Map" id="gaode_Map"></div></div></el-col></el-row></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader"; //引入AMapLoader
window._AMapSecurityConfig = {// 设置安全密钥securityJsCode: "xx",
};
export default {components: {},props: [],data () {return {loading: false,visible: false,isDetail: false,dataForm: {kqLocation: undefined,kqLongitude: undefined,kqLatitude: undefined,},rules: {},input: "",map: null,auto: null,placeSearch: null,lnglat: [],markers: [],position: {},form:{},address:null,};},computed: {},watch: {},created () { },mounted () {this.initMap() },methods: {// 地图初始化initMap () {let centerLen = [116.397428, 39.90923];AMapLoader.load({key: "xx", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Geocoder"],}).then((AMap) => {this.map = new AMap.Map("gaode_Map", {// 设置地图容器idviewMode: "3D", //  是否为3D地图模式zoom: 18, // 初始化地图级别center: centerLen, //中心点坐标resizeEnable: true,});this.setMarker(centerLen)// 关键字查询this.searchMap();// 监听鼠标点击事件this.map.on("click", this.clickMapHandler);}).catch((e) => { });},// 关键字查询searchMap () {// 搜索框自动完成类this.auto = new AMap.AutoComplete({input: "tipinput", // 使用联想输入的input的id});//构造地点查询类this.placeSearch = new AMap.PlaceSearch({map: this.map,});// 当选中某条搜索记录时触发this.auto.on("select", this.selectSite);},//选中查询出的记录selectSite (e) {if (e.poi.location) {this.lnglat = e.poi.location;this.placeSearch.setCity(e.poi.adcode);this.placeSearch.search(e.poi.name); //关键字查询let geocoder = new AMap.Geocoder({});let that = this;geocoder.getAddress(this.lnglat, function (status, result) {if (status === "complete" && result.regeocode) {var province = result.regeocode.addressComponent.province;var city = result.regeocode.addressComponent.city;//自己想要赋的值，根据自己的做修改that.$set(that.form, "province", province);that.$set(that.form, "city", city);that.$set(that.form, "address", e.poi.name);that.$set(that.form,"coordinate",// e.poi.location.lng + "," + e.poi.location.late.poi.location[0]+","+ + e.poi.location[1]); //纬度，经度} else {}});} else {this.$message.error("查询地址失败，请重新输入地址");}},// 点击地图事件获取经纬度，并添加标记clickMapHandler (e) {this.dataForm.kqLongitude = e.lnglat.getLng();this.$emit('longitude', this.dataForm.kqLongitude)this.dataForm.kqLatitude = e.lnglat.getLat();this.$emit('latitude', this.dataForm.kqLatitude)this.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];this.setMarker(this.lnglat);// 点击地图上的位置，根据经纬度转换成详细地址let geocoder = new AMap.Geocoder({});let that = this;geocoder.getAddress(this.lnglat, function (status, result) {if (status === "complete" && result.regeocode) {that.dataForm.kqLocation = result.regeocode.formattedAddress;that.$emit('address', that.dataForm.kqLocation)that.address=that.dataForm.kqLocation;} else {}});this.position = {longitude: e.lnglat.getLng(),latitude: e.lnglat.getLat(),address: that.address,};this.input = that.address; //把查询到的地址赋值到输入框},//  添加标记setMarker (lnglat) {this.removeMarker();let marker = new AMap.Marker({position: lnglat,});marker.setMap(this.map);this.markers.push(marker);},// 删除之前后的标记点removeMarker () {if (this.markers) {this.map.remove(this.markers);}},},
};
</script><style lang="scss">
.search_box {display: flex;justify-content: flex-start;align-items: center;height: 50px;.label {color: #000;width: 100px;}
}.content {position: relative;
}#panel {position: absolute;top: 50px;right: 20px;
}#gaode_Map {overflow: hidden;width: 100%;height: 340px;margin: 0;
}.amap-sug-result {z-index: 2999 !important;
}
</style>

页面引用:

import amap from '@/components/Amap/index'components:{amap},<el-form-item label="地址" prop="address"><el-input v-model="form.address" placeholder="请输入地址" /></el-form-item><el-form-item label="经度" prop="longitude"><el-input v-model="form.longitude" placeholder="请输入经度" /></el-form-item><el-form-item label="纬度" prop="latitude"><el-input v-model="form.latitude" placeholder="请输入纬度" /></el-form-item><el-form-item label=""><amap @address="getAddress" @longitude = "getLongitude" @latitude = "getLatitude"></amap></el-form-item>#子组件选择赋值给父组件的属性getAddress(data){this.form.address = data;},getLongitude(data){this.form.longitude = data;},getLatitude(data){this.form.latitude = data;},