百度地图实时动态轨迹

百度地图实时动态轨迹

后端直接使用node版的socket.io推送轨迹点

const server = require('http').createServer()
const socketIo = require('socket.io')(server)
const CreatePoint = require('./CreatePoint.js')

// 所有已连接的客户端
socketIo.on('connection', (client) => {
  // console.log(client)
  // 断开时删除
  client.on('disconnect', () => {
    // 。。。
  })
  // 当客户端触发setPoint事件之后，socket就向客户端推送新的坐标
  client.on('setPoint', (point) => {
    console.log(point)
    // 1. 创建一个创造坐标的实例
    let CreateCustomPoint = new CreatePoint(point)
    // 每隔3秒向客户端推送一次坐标
    setInterval(() => {
      client.emit('newPoint', CreateCustomPoint.randomAction())
    }, 3000)
  })
})



server.listen(3000, '192.168.1.202', () => {
  console.log('this server is listening on port 3000')
})

前端就一个发送事件和监听事件

先需要连接到socket

import VueSocketIo from 'vue-socket.io'

Vue.use(new VueSocketIo({
  debug: true,
  // 这里的地址就是后端地址
  connection: '192.168.1.202:3000',
  vuex: {
    store,
    actionPrefix: 'SOCKET_',
    mutationPrefix: 'SOCKET_'
  }
  // options: { path: "/my-app/" }
}))

sockets: {
    // socket服务器连接时触发
    connect: () => {
      console.log('已成功连接到socket服务器')
    },
    // 接收socket服务器推送的newPoint事件
    newPoint(point) {
      console.log(`接收到socket服务器的新坐标${point}`)
      // console.log(this)
      this.points.push(point)
      // 关闭原来的标志物
      this.mkrTool.close()
      this.map.clearOverlays()
      // this.map.centerAndZoom(point, 15)
      // 在新坐标添加覆盖物
      this.freshOverlay(point)
    }
  },

效果

地址

github: https://github.com/lyttonlee/...