安装与配置：
组件 | vue-amapDescription
https://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-box
class="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.province
row.city = this.centerAddress.city
row.disrict = this.centerAddress.district
row.addressDetail = this.centerAddress.formattedAddress
row.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.province
row.city = this.centerAddress.city
row.disrict = this.centerAddress.district
row.addressDetail = this.centerAddress.formattedAddress
row.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>
