/**
  // author：jiana
  // time:2025-04-23
  // desc:运单管理
*/
<template>
  <div class="mapMark">
    <div id="container"></div>
  </div>
</template>
<script>
import { defineComponent, ref ,reactive, onMounted} from 'vue'
import {useRoute} from 'vue-router'
import AMapLoader from "@amap/amap-jsapi-loader";
import axios from 'axios';
import { tms } from '@/request/api'
export default defineComponent({
  components:{
    
  },
  props:{
    markInfo: { type: Object, default:{longitude:'',latitude:''}}
  },
  setup(props) {
    const route = useRoute()
    const trajectory = ref([]);
    const loadData = async () =>{
      trajectory.value = []
      trajectory.value.push([Number(props.markInfo.longitude),Number(props.markInfo.latitude)])
    }
    const getMap = () =>{
      AMapLoader.load({
        key: '81a1282308f1aae58082425a1ebb91b0',
        version: '2.0',
        plugins: ['AMap.MoveAnimation']
      }).then(AMap => {
        AMap.plugin('AMap.MoveAnimation', () => {
          var map = new AMap.Map('container', {
            center: trajectory.value[0],
          });
          // 起点
          var marker = new AMap.Marker({
            map: map,
            position: trajectory.value[0],
            icon: require('@/assets/images/dian.png'), // 自定义图标
            offset: new AMap.Pixel(-13, -26),
          });

          map.setFitView();
          map.setZoom(13);
        });
      }).catch(e => {
        console.error(e);
      });
    }
    onMounted(async ()=>{
      await loadData()
      await getMap()
    })
    return {
      
    }
  },
})
</script>

<style lang="scss" scoped>
.mapMark{
  // padding: 20px;
  #container{
    width: 100%; 
    height: 460px;
  }
  .btnBox{
    position: absolute;
    top: 70px;
    left: 20px;
    z-index: 1;
    background: #fff;
    width: 200px;
    height: 110px;
    padding: 10px;
    border-radius: 5px;
  }
}
</style>
<style lang="scss">
.amap-icon{
  width: 40px !important;
  height: 40px !important;
}
.amap-icon img{
  width: 40px !important;
  height: 40px !important;
}
</style>