vue项目里引入高德地图并多处定点打标

由于前两个月项目赶得紧。加班太多。导致微博停更了两个月。今天开始重新开更

<template>
  <el-row :gutter="10">
    <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6"><div class="grid-content" style="background-color: #033447">
      <div style="width: 100px;height: 30px;background-color: rgba(43,133,235);line-height: 30px;color: white">运单统计</div>
      <Echarts :right="rightInfo"></Echarts>
      <div style="width: 100px;height: 30px;background-color: rgba(43,133,235);line-height: 30px;margin-top: 20px;color: white">运单列表</div>
      <billList :leftList="leftList"></billList>
    </div></el-col>
    //这一部分container是高德地图的代码块
    <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12"><div class="grid-content bg-purple-light">
      <div style="height:912px" id="container" tabindex="0"></div>
    </div></el-col>
    <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6"><div class="grid-content" style="background-color: #033447">
      <div style="width: 100px;height: 30px;background-color: rgba(43,133,235);line-height: 30px;color: white">客户单量</div>
      <customerBillNum :customerBillNum="leftCustomer"></customerBillNum>
      <div style="width: 100px;height: 30px;background-color: rgba(43,133,235);line-height: 30px;margin-top: 20px;color: white">货物统计</div>
      <billInfo :leftChart="leftChart"></billInfo>
    </div></el-col>
  </el-row>

</template>
<link rel="stylesheet" type="text/css" href="css/app.css" />
<script>
//这部分import删掉。放了报错
  import Echarts from '@/components/Echarts'
  import billList from '@/components/billList'
  import billInfo from "@/components/billInfo";
  import customerBillNum from '../components/customerBillNum';
  //这部分往下不可以删
  // 引入地图组件
  // import AMap from '../util/Amap'
  import AMap from 'AMap'

  export default {
    name: 'home',
    components: {
      Echarts,billList,billInfo,customerBillNum
    },
    data(){
      return{
        map:null,
        leftChart:{},
        // rowStyle: {height: 40 + 'px'},
        leftList:{},
        rightInfo:{},
        leftCustomer:{},
        billWayList:[],
        markers : []
      }
    },
    mounted() {
      this.billList();
      this.init()
    },
    methods:{
      // 初始化
      init: function () {
        this.map = new AMap.Map('container', {
          resizeEnable: true,
          center: [114.52, 35.10],
          zoom: 6,
          mapStyle: 'amap://styles/blue', //设置地图的显示样式
        });
        this.map.clearMap();  // 清除地图覆盖物
      },
      //接口
      billList(){
        this.$http.get('http://localhost:8000/api/billWay/find',{
          params:{
            sort:'updatedTime,desc'
          }
        }).then((res) => {
          let vlastLocation = res.data.data.vlastLocation;
          vlastLocation.forEach((value,index,array) => {
            let postion = [];
            postion.push(array[index].lon/600000)
            postion.push(array[index].lat/600000)
            let marker = new AMap.Marker({
              map: this.map,
              icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png',
              position: postion,
              offset: new AMap.Pixel(-13, -30)
            });

            this.map.add(marker)
          })
        }).catch(function(response) {
          console.log(response); //发生错误时执行的代码
        });
      }
    }
  }
</script>
<style lang="scss" scoped>
  .seamless-warp {
    height: 229px;
    overflow: hidden;
  }
  ::-webkit-scrollbar {
    width: 1px;
    height: 1px;
  }
/*el响应式*/
  .el-row{
    background-color: #033447;
    width: 100%;
  }
  .el-col {
    border-radius: 4px;
    background-color:#033447;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
</style>