百度地图实时动态轨迹

百度地图实时动态轨迹

后端直接使用 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/…