cnpm install vue-amap -S // 安装项目依赖

---

项目 main.js里面：
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
// 配置
VueAMap.initAMapApiLoader({
  key: 'c800ea593e4d8138cfe450b2c672d002', // 在高德开放平台上申请的 web  Pc端 key
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.TruckDriving', 'AMap.Geolocation'],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4'
})

 

<style>
  .amap-demo {
    height: 400px;
  }
</style>
<template>
  <el-row>
    <el-col :span="24">
      <div>
        <el-amap vid="amapDemo" :center="center" :plugin="plugin" ref="map" class="amap-demo" style="height: 400px;">
          <el-amap-marker v-for="(item,index) in computedCarList" :position="item.marker" :key="index">
            <div>{{item.nowVolume}}/{{item.maxVolume}}</div>
            <div>
              <svg class="icon" aria-hidden="true" style="font-size:30px;" @click="handler(item)">
                <use xlink:href="#icon-dituche-copy-copy" v-if="Number(item.nowVolume) === Number(item.maxVolume)"></use>
                <use xlink:href="#icon-dituche-copy" v-if="Number(item.nowVolume) === 0"></use>
                <use xlink:href="#icon-dituche" v-if="Number(item.nowVolume) < Number(item.maxVolume) && Number(item.nowVolume) !== 0"></use>
              </svg>
            </div>
          </el-amap-marker>
        </el-amap>
        <div class="toolbar" style="width:100%;height: 100px;margin-top:20px;border:1px solid rebeccapurple">
          <!--<span v-if="loaded">-->
          <!--location: lng = {{ lng }} lat = {{ lat }}-->
          <!--</span>-->
          <!--<span v-else>正在定位.......</span>-->
          <p>
            <span>此车的信息：<span class="font-red">{{text}}</span></span>
          </p>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
// import {AMapManager} from 'vue-amap'
// center: [104.066351, 30.552302],
export default {
  data() {
    let self = this
    return {
      lng: 0,
      lat: 0,
      maxTimes: 100,
      nowTime: 1,
      loaded: false,
      text: '',
      minNum: parseInt(Math.random() * 0.00001) + 1,
      maxNum: parseInt(Math.random() * 0.00009) + 1,
      // slotStyle: {
      //   color: 'red'
      // },
      window: '',
      windows: [],
      // 以当前帐号登录IP所在城市为地图默认城市,初始值可任意
      center: [121.5273285, 31.21515044],
      // Geolocation定位服务插件
      plugin: [{
        pName: 'Geolocation',
        events: {
          init(o) {
            // o 是高德地图定位插件实例
            o.getCurrentPosition((status, result) => {
              if (result && result.position) {
                self.lng = result.position.lng
                self.lat = result.position.lat
                self.center = [self.lng, self.lat] // 获取到当前ip所在经纬度并覆盖初始值
                self.loaded = true
                self.$nextTick()
              }
            })
          }
        }
      }],
      carList: []
    }
  },
  created() {
    // 模拟请求接口 返回来的车辆信息后 回调
    this.mockCarList().then(response => {
      if (response.success) {
        this.carList = response.data
      }
    })
    this.setTime()
  },
  computed: {
    computedCarList() {
      return this.carList.map(v => {
        v.marker = [v.jin, v.wei]
        // 仅把经纬度组合成一个 新添加的键marker的值
        // 并未改变其原数据
        return v
      })
    }
  },
  methods: {
    // mock 首次请求来的后端数据
    mockCarList() {
      return new Promise((resolve, reject) => {
        setTimeout(resolve({
          success: true,
          data: [
            {carId: '001', jin: '104.065731', wei: '30.657478', nowVolume: 20, maxVolume: '50'}, // 天府广场
            {carId: '002', jin: '104.073863', wei: '30.695643', nowVolume: 35, maxVolume: '50'}, // 火车北站
            {carId: '003', jin: '103.961983', wei: '30.676526', nowVolume: 0, maxVolume: '50'}, // 市妇女儿童中心医院
            {carId: '004', jin: '104.066071', wei: '30.573197', nowVolume: 50, maxVolume: '50'} // 市*
          ]
        }), 2000)
      })
    },
    // 点击选择某车，弹出该车的相关信息this.text
    handler(item) {
      this.text = item
      // 模拟移动: 点击某车，该车移动多少经纬度0.00009
      item.jin = parseFloat(item.jin) + 0.00009
      item.wei = parseFloat(item.wei) + 0.00009
      console.log(item.jin, item.wei)
    },
    setTime() {
      setTimeout(() => {
        // 监听后端更新推送来的新数据(后端会10分钟更新推送一次新的定位)，
        // 前端监听消息服务器，给其对应的carId赋上新的经纬度（即实现了运动）
        // 若返回来的carId跟已有的carId没有对应关系,则为新的一个车：新给地图新追加一个车辆 和经纬度
        Promise.resolve({carId: '005', jin: '104.065731', wei: '30.657478', nowVolume: 20, maxVolume: '50'}).then(item => {
          const thisCar = this.carList.filter(v => v.carId === item.carId) // 找到其对应的carId
          if (thisCar.length >= 1) {
            thisCar.forEach(item => {
              this.$set(item, 'jin', parseFloat(item.jin) + 0.00009)
              this.$set(item, 'wei', parseFloat(item.wei) + 0.00009)
            })
          } else { // 如果没有对应的carId,则新给地图新追加一个车辆 和经纬度
            this.carList.push(item)
          }
        })
        console.log('setTimeout')
        this.nowTime++
        if (this.nowTime < this.maxTimes) {
          this.setTime()
        }
      }, 1000) // 每一秒钟 经纬度 +0.00009，即实现了模拟运动
    }
  }
}
</script>