vue集成高德地图API实现坐标拾取功能

安装与配置：

组件 | vue-amapDescriptionhttps://elemefe.github.io/vue-amap/#/zh-cn/introduction/install简介 | @vuemap/vue-amap简介https://vue-amap.guyixi.cn/zh-cn/introduction/introduction.html        ​​​​我的应用 | 高德控制台高德开放平台官网控制台提供了高德开发者Key管理，Key可视化分析等功能。https://console.amap.com/dev/key/app        

页面设计与引用

<template><div class="amap-wrapper"><el-amap class="amap-box"  :vid="'amap-vue'"  :bubble="true" :center="center" :zoom="zoom" :events="events"><!-- 搜索框 --><el-amap-search-boxclass="searchBox":search-option="searchOption":on-search-result="onSearchResult"/><!-- 标注点 --><el-amap-marker :position="center" ></el-amap-marker><!-- tootip --><el-amap-text:position="mark":text="mark.toString()":offset="[100,-20]"></el-amap-text><!-- 信息窗体--><el-amap-info-window:position="center":offset="[0,-30]"><div style="margin: 15px 5px 0">{{ centerAddress.formattedAddress }}</div></el-amap-info-window></el-amap></div>
</template>
<script>export default {name: 'siteinfo',data() {return {zoom: 10,//初始缩放比例center: [104.077448,30.624161],//初始中心点mark: [104.077448,30.624161],//初始标记点centerAddress: {//中心点位置信息city: "全国",district: "全国",province: "全国",township: "",formattedAddress: "全国",},markAddress: {//标记点位置信息city: "全国",district: "全国",province: "全国",township: "",formattedAddress: "全国",},searchOption:{city:"全国",citylimit:true,},events: {// init: (e) => {//     // this.center=[101.722732,26.580607]//     this.getAddress(this.center);// },click: (e) => {this.center = [e.lnglat.lng, e.lnglat.lat]this.getAddress(this.center);},mousemove: (e) => {this.mark = [e.lnglat.lng, e.lnglat.lat]}}}},methods: {// 使用AMap服务获取地址getAddress(latLong){var geocoder;AMap.plugin("AMap.Geocoder",function(){geocoder = new AMap.Geocoder({radius: 1000,extensions: 'all'});})geocoder.getAddress(latLong, (status, result) => {console.log("address", result)if (status === 'complete' && result.info === 'OK') {// 获取当前点名称const address = result.regeocode.formattedAddress;this.centerAddress = {city: result.regeocode.addressComponent.city,district: result.regeocode.addressComponent.district,province: result.regeocode.addressComponent.province,township: result.regeocode.addressComponent.township,formattedAddress: address,}// console.log("address", result)}});},// 地图搜索回调onSearchResult(pois) {if( pois.length !== 0){this.center=[pois[0].lng, pois[0].lat];this.getAddress(this.center);}console.log("地图回调", pois);},//修改时将当前坐标赋值rowEdit(row, index){console.log("row",row)this.center=row.latLong.split(',').map(Number)this.getAddress(this.center);this.$refs.crud.rowEdit(row,index)},//新增时给个初始位置rowAdd(){this.center=[104.077448,30.624161];this.getAddress(this.center);},// 更新handleUpdate: function (row, index, done,loading) {row.province = this.centerAddress.provincerow.city = this.centerAddress.cityrow.disrict = this.centerAddress.districtrow.addressDetail = this.centerAddress.formattedAddressrow.latLong = this.center.toString()console.log(row)if( row.latLong ){putObj(row).then(data => {this.$message.success('修改成功')done()this.searchForm = {}this.getList(this.page)}).catch(() => {loading();});}else {this.$message.error('请选择筛查地点')}},// 保存handleSave: function (row, done,loading) {row.province = this.centerAddress.provincerow.city = this.centerAddress.cityrow.disrict = this.centerAddress.districtrow.addressDetail = this.centerAddress.formattedAddressrow.latLong = this.center.toString()console.log(row)addObj(row).then(data => {this.$message.success('添加成功')done()this.searchForm = {}this.getList(this.page)}).catch(() => {loading();});},}}
</script><style scoped>
.amap-wrapper {width: 100%;height: 75Vh;position: relative;.searchBox{position: absolute;top: 20px;left: 20px;}
}
</style>