百度地图实时动态轨迹

百度地图实时动态轨迹

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