<template>
  <el-dialog title="当前位置信息" :visible.sync="open" width="800px" append-to-body destroy-on-close :close-on-click-modal="false">
    <div id="map" style="width: 100%; height: 500px"></div>
  </el-dialog>

</template>

<script>
  //当前位置
  import { EditorMap } from "@/utils/mapClass/map";
  import { mapGetters } from "vuex";
  import { getCurrentLocation } from "@/api/usergps/gps";
  import gcoord from 'gcoord';
  export default {
    name: "current-location",
    data(){
      return{
        //高德地图
        gaoMap: null,
        open: false
      }
    },
    methods:{
      openDialog(id){
        this.open = true;
        this.initMap();
        this.currentLocal(id);
      },
      //初始化地图
      initMap() {
        this.$nextTick(() => {
          const path = eval(this.systemSetting.map_center);
          this.gaoMap = new EditorMap(
            "map",
            {
              center: path,
              //mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
              zoom: 16,
            },
            this
          );
        });
      },
      addMarker(data) {
        let marker = new AMap.Marker({
          map: this.gaoMap.map,
          anchor: "bottom-center",
          position: gcoord.transform(
            [data.lng, data.lat],    // 经纬度坐标
            gcoord.WGS84,               // 当前坐标系
            gcoord.GCJ02                 // 目标坐标系
          ),
          extData: data,
        });
        marker.on("mouseover", (e) => {
          const target = e.target;
          target.setLabel({
            content: "速度:" + target.getExtData().speed + ",停留时间(分):" + target.getExtData().stopMinute,
            direction: "top",
          });
        });
        marker.on("mouseout", (e) => {
          const target = e.target;
          target.setLabel({ content: "" });
        });
        this.gaoMap.map.panTo(gcoord.transform([data.lng, data.lat],gcoord.WGS84,gcoord.GCJ02));
      },
      /**获取当前位置*/
      currentLocal(id){
        getCurrentLocation({id:id}).then(res =>{
          if(res.code == 200 && res.data){
            this.addMarker(res.data);
          }
        })
      }

    },
    computed: {
        ...mapGetters(["systemSetting"]),
    },
  }
</script>

<style scoped>

</style>
