如图，默认定位到当前位置，输入目标地址可以筛选出相关位置，确定后可以获取到选择的地理信息
<template>
<el-dialog title="选择定位信息" :visible.sync="centerDialogVisible" width="800px" center>
<div class="main-content">
<div id="container"></div>
<div class="input-content">
<el-input type="text" v-model="mapInput" @change="changeInput" placeholder="请输入位置信息">
<template slot="append">
<el-button type="primary" icon="el-icon-search" @click="changeInput">搜索</el-button>
</template>
</el-input>
<div class="poi-list">
<div v-for="item in poiList" :key="item.id" class="poi-item">
<el-radio v-model="radio" :label="item.id" @change="selectMap">
{{ item.name }}（{{ item.cityname }}{{ item.adname }}{{ item.address }}）
</el-radio>
</div>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible = false">关 闭</el-button>
<el-button type="primary" @click="saveSelectMap">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
props: {
value: {
type: Boolean,
default: false
}
},
data() {
return {
map: null,
geolocation: null,
placeSearch: null,
pageIndex: 1,
location: {},
selectPoi: {},
city: '',
radio: '',
poiList: [],
mapInput: '',
};
},
computed: {
centerDialogVisible: {
get() {
return this.value
},
set(val) {
this.$emit('update:value', val)
}
}
},
mounted() {
this.$nextTick(() => {
this.init();
})
},
methods: {
// handleScroll(event) {
// const scrollTop = event.target.scrollTop;
// const scrollHeight = event.target.scrollHeight;
// const clientHeight = event.target.clientHeight;
// // 当滚动到底部时执行相应逻辑
// if (scrollTop + clientHeight >= scrollHeight) {
// if (!this.pageIndex) {
// return
// }
// this.pageIndex++
// this.getPlaceSearch(this.location)
// console.log('滚动到底部了');
// // 在这里添加你需要执行的代码
// }
// },
saveSelectMap() {
if (!this.selectPoi.id) {
this.$message({
message: '请选择定位信息',
type: 'error'
})
return
}
console.log(3423423);
console.log(this.selectPoi);
this.getPositionInfo(this.selectPoi)
},
selectMap() {
console.log(this.radio);
const poi = this.poiList.find(item => item.id === this.radio)
this.selectPoi = poi;
const { lng, lat } = poi.location
this.map.setCenter([lng, lat]);
// 清楚之前的标记
this.map.clearMap()
// 添加标记
new AMap.Marker({
position: [lng, lat],
map: this.map,
})
},
init() {
this.map = new AMap.Map('container', {
resizeEnable: true
});
AMap.plugin('AMap.Geolocation', (test) => {
console.log(test);
this.geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：5s
position: 'RB', //定位按钮的停靠位置
offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
});
this.map.addControl(this.geolocation);
this.map.on('click', this.showInfoClick)
AMap.event.addListener(this.geolocation, 'complete', (result) => {
const { lng, lat } = result.position;
console.log(result);
// 根据经纬度获取获取当前位置信息
this.location = result.position
this.getPlaceSearch(this.location)
this.map.setCenter([lng, lat]);
})
this.geolocation.getCurrentPosition((status, result) => {
if (status == 'complete') {
const { lng, lat } = result.position;
console.log(result);
console.log(123123);
this.city = result.addressComponent.province;
this.getPlaceSearch({ lng, lat })
this.map.setCenter([lng, lat]);
} else {
this.$message({
message: '定位失败',
type: 'error'
});
// onError(result)
}
});
});
},
showInfoClick(e) {
const { lng, lat } = e.lnglat
this.mapInput = ''
this.map.setCenter([lng, lat]);
// 清楚之前的标记
this.map.clearMap()
// 添加标记
new AMap.Marker({
position: [lng, lat],
map: this.map,
title: '我的位置'
})
this.getPlaceSearch({ lng, lat })
},
getPlaceSearch({ lng, lat }) {
console.log(this.city);
// 根据经纬度获取附近的POI
this.placeSearch = new AMap.PlaceSearch({
type: '',
pageSize: 50, // 最大50条
pageIndex: this.pageIndex,
city: this.city,
})
this.placeSearch.searchNearBy('', [lng, lat], 200, (status, result) => {
if (status === 'complete' && result.poiList) {
console.log(result.poiList);
console.log(2131)
this.poiList = result.poiList.pois
} else {
}
})
},
// 根据定位获取位置信息
getPositionInfo(poi) {
const { lng, lat } = poi.location
const address = poi.address
const geocoder = new AMap.Geocoder()
geocoder.getAddress([lng, lat], (status, result) => {
if (status === 'complete' && result.regeocode) {
console.log(result.regeocode);
const addressComponent = result.regeocode.addressComponent
const { province, city, district, township, street, streetNumber } = addressComponent
this.$emit('selectMap', {
lng,
lat,
address,
province,
city,
district,
township
})
this.centerDialogVisible = false
// this.placeSearch.search('旺旺集团', (status, result) => {
// if (status === 'complete' && result.poiList) {
// console.log(result.poiList);
// }
// });
} else {
this.$message({
message: '获取位置信息失败',
type: 'error'
});
}
})
},
changeInput() {
if (!this.mapInput) {
this.init()
return
}
this.placeSearch.search(this.mapInput, (status, result) => {
if (status === 'complete' && result.poiList) {
console.log(result.poiList);
this.poiList = result.poiList.pois
}
})
},
open() {
this.centerDialogVisible = true
}
}
};
</script>
<style lang="less" scoped>
.main-content {
width: 100%;
height: 100%;
display: flex;
}
#container {
width: 400px;
height: 400px;
}
.input-content {
width: calc(100% - 400px);
padding-left: 10px;
}
.poi-list {
margin-top: 10px;
max-height: 350px;
overflow-y: auto;
.poi-item {
padding: 10px;
border-bottom: 1px solid #ccc;
&:last-child {
border-bottom: none;
}
}
}
</style>
