<template>
  <el-dialog title="当前位置信息" :visible.sync="open" width="800px" append-to-body destroy-on-close :close-on-click-modal="false">
    <div class="mapChange">
      <div :class="{ active: !mapStyle }" @click="mapChange(1)">卫星地图</div>
      <div :class="{ active: mapStyle }" @click="mapChange(2)">全景地图</div>
    </div>
    <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,
        mapStyle: true
      }
    },
    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);
          }
        })
      },
      // 更改卫星图
      mapChange(num) {
        if (num == 1) {
          this.mapStyle = false;
        } else {
          this.mapStyle = true;
        }
        this.gaoMap.changeMap(this.mapStyle);
      },

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

<style scoped lang="scss">
  .mapChange {
    top: 95px;
    color: #1890ff;
    //background-color: #e8f4ff;
    position: absolute;
    display: flex;
    z-index: 9999;
    div {
      padding: 4px 8px;
      border: 1px solid #fff;
      background-color: #e8f4ff;
      margin-left: 8px;
      cursor: pointer;
      &.active,
      &:hover {
        background-color: #1890ff;
        color: #fff;
      }
    }
  }

</style>
