<template>
<!-- 用户分布 --><div style="height:900px;"><el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo"><!-- <el-amap-markerv-for="(componentMarker,index) in componentMarker":key="index":position="componentMarker.position":events="componentMarker.events"></el-amap-marker>--><el-amap-markerv-for="(item,index) in userList":key="index":position="[String(item.longitude),String(item.latitude)]":events="events"></el-amap-marker><!-- <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 type="primary" size="small" @click="getAddCard('form')">保存</el-button> --><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 => {this.dialogFormVisible = true;userJWFind({jing: a.target.F.position.lng,wei: a.target.F.position.lat}).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",gridData: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄"}],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>