<template>
<el-dialog title="选择坐标"
fullscreen
v-model="dialogVisible">
<el-row>
<div class="amap-page-container">
<el-amap-search-box class="search-box"
:on-search-result="onSearchResult"
:center="center"></el-amap-search-box>
<el-amap :vid="'amap-vue'"
:zoom="zoom"
:center="center"
:events="events">
<el-amap-marker :position="marker.position"
:events="marker.events"
:visible="marker.visible"
:draggable="marker.draggable"></el-amap-marker>
</el-amap>
</div>
</el-row>
<span slot="footer"
class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary"
@click="submit">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
//https://elemefe.github.io/vue-amap
export default {
data() {
return {
q: '',
zoom: 14,
center: [116.602489, 40.080734],
marker: {
position: [116.602489, 40.080734],
//events: {
// click: () => {
// alert('click marker');
// },
// dragend: (e) => {
// this.marker.position = [e.lnglat.lng, e.lnglat.lat];
// }
//},
visible: true,
draggable: false
},
events: {
click: (e) => {
this.marker.position = [e.lnglat.lng, e.lnglat.lat]
}
},
dialogVisible: false
}
},
methods: {
open(lng, lat) {
if (lng && lat) {
this.center = [lng, lat]
this.marker.position = [lng, lat]
}
this.dialogVisible = true
},
onSearchResult(pois) {
let latSum = 0;
let lngSum = 0;
pois.forEach(poi => {
lngSum += poi.lng;
latSum += poi.lat;
});
let center = {
lng: lngSum / pois.length,
lat: latSum / pois.length
};
this.center = [center.lng, center.lat];
},
submit() {
this.$emit('callback', this.marker.position)
this.dialogVisible = false
}
}
}
</script>
<style>
.amap-page-container {
margin-top: -50px;
width: 100%;
height: 450px;
}
.search-box {
margin-top: 0px;
position: relative;
top: 65px;
left: 20px;
}
</style>
vue.js element-ui 高德地图 选取坐标 dialog
最新推荐文章于 2024-07-18 09:36:19 发布