<template>
<!-- 用户分布 -->
<div style="height:900px;">
<el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo">
<!-- <el-amap-marker
v-for="(componentMarker,index) in componentMarker"
:key="index"
:position="componentMarker.position"
:events="componentMarker.events"
></el-amap-marker>-->
<el-amap-marker
v-for="(item,index) in userList"
:key="index"
:position="[item.longitude,item.latitude]"
:events="events"
:extData="item"
/>
<!-- <el-amap-marker
:position="[1.1,2.1]"
:events="events"
></el-amap-marker>-->
<!-- 弹窗添加 -->
<div class="frame">
<el-dialog :visible.sync="dialogFormVisible" width="400px">
<el-form ref="form" :model="form">
<el-row :span="8">
<div class="textstyle">姓名 : {{ formatData(form.userName) }}</div>
</el-row>
<el-row :span="8">
<div class="textstyle">手机号 : {{ formatData(form.telephone) }}</div>
</el-row>
<el-row :span="8">
<div class="textstyle">车牌号 : {{ formatData(form.plateNumber) }}</div>
</el-row>
<el-row :span="8">
<div class="textstyle">最后登录时间 : {{ formatData(form.loginTime) }}</div>
</el-row>
<el-row :span="8">
<div class="textstyle">longitude : {{ formatData(form.longitude) }}</div>
</el-row>
<el-row :span="8">
<div class="textstyle">latitude : {{ formatData(form.latitude) }}</div>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="dialogFormVisible = false">返回</el-button>
</div>
</el-dialog>
</div>
</el-amap>
</div>
</template>
<style>
.frame .textstyle {
font-size: 20px;
margin-top: 15px;
margin-left: 30px;
}
</style>
<script>
import { userMapGps
// userJWFind
} from '@/api/gpsMap'
export default {
data() {
return {
events: {
click: a => {
// console.log(a.target.F.position.O)
// console.log(a.target.F.position.P)
// console.log( a.target.F.extData)
var allS = a.target.F.extData
this.dialogFormVisible = true
this.form.userName = allS.userName
this.form.telephone = allS.telephone
this.form.plateNumber = allS.plateNumber
this.form.loginTime = allS.loginTime
this.form.longitude = allS.longitude
this.form.latitude = allS.latitude
// userJWFind({
// // jing: a.target.F.position.lng,
// // wei: a.target.F.position.lat
// jing: a.target.F.position.O,
// wei: a.target.F.position.P
// }).then(response => {
// if (response.code === 0) {
// if (response.data) {
// this.form.userName = response.data.userName
// this.form.telephone = response.data.telephone
// this.form.plateNumber = response.data.plateNumber
// this.form.loginTime = response.data.loginTime
// this.form.longitude = response.data.longitude
// this.form.latitude = response.data.latitude
// } else {
// this.form.userName = '暂无数据'
// this.form.telephone = '暂无数据'
// this.form.plateNumber = '暂无数据'
// this.form.loginTime = '暂无数据'
// this.form.longitude = '暂无数据'
// this.form.latitude = '暂无数据'
// }
// } else {
// this.$message.error(response.msg)
// }
// })
}
},
form: {
userName: '',
telephone: '',
plateNumber: '',
loginTime: '',
longitude: '',
latitude: ''
},
userList: [],
tit: '111',
dialogFormVisible: false,
formLabelWidth: '100px',
zoom: 4,
// aaa: '<div style="background: #fff">text from'+console.log(this)+'</div>',
center: [121.5273285, 31.21515044]
// componentMarker: [
// {
// position: [121.5273285, 31.21515044],
// events: {
// click: loginPositionId => {
// cosnsole.log(1);
// }
// }
// }
// ]
}
},
created() {
userMapGps().then(response => {
if (response.code === 0) {
var list = response.data
var newList = []
for (var i = 0; i < list.length; i++) {
newList.push(list[i])
// if(newList[i].longitude === null||newList[i].longitude===''){newList[i].longitude = '0.0'}
// if(newList[i].latitude === null ||newList[i].latitude===''){newList[i].latitude = '0.0'}
// console.log(newList[i].longitude);
}
// console.log(newList) String(item.longitude),String(item.latitude)
this.userList = newList
// console.log(this.userList);
} else {
this.$message.error(response.msg)
}
})
},
methods: {
// 格式化数据
formatData(v) {
return v || '/'
}
}
}
</script>
vue-amap多个点渲染,并绑定点击事件
最新推荐文章于 2023-12-06 09:56:30 发布