vue-amap多個點渲染，並綁定點擊事件

<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>