vue人员轨迹_百度地图实时动态轨迹

百度地图实时动态轨迹

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

}

},

效果

地址