a-map高德

<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="[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>