百度地图实时动态轨迹

2019-06-12 admin

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

效果

map4-1.gif

地址

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

[转载]原文链接:https://segmentfault.com/a/1190000019458564

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-67145.html

文章标题:百度地图实时动态轨迹

相关文章
jquery实现动态改变div宽度和高度
完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht...
2017-03-23
JS使用ajax从xml文件动态获取数据显示的方法
本文实例讲述了JS使用ajax从xml文件动态获取数据显示的方法。分享给大家供大家参考。具体分析如下: 下面的JS代码通过ajax检索xml文件的内容动态展示到网页,真个页面无刷新 <!DOCTYPE html> <htm...
2017-03-21
javascript动态创建链接的方法
本文实例讲述了javascript动态创建链接的方法。分享给大家供大家参考。具体分析如下: 动态创建链接示例: <html xmlns="http://www.w3.org/1999/...
2017-03-23
JavaScript动态添加style节点的方法
本文实例讲述了JavaScript动态添加style节点的方法。分享给大家供大家参考。具体如下: var css = 'h1 { background: red; }', head = document.getEleme...
2017-03-24
javascript实现动态导入js与css等静态资源文件的方法
本文实例讲述了javascript实现动态导入js与css等静态资源文件的方法。分享给大家供大家参考。具体实现方法如下: /** * 动态导入静态资源文件js/css */ var $import = fu...
2017-03-27
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Bootstrap风格的分页控件自适应的: 参考网址:分页参考文档 1.风格样式: 2.首先引入js文件jQuery.twbsPagination.js <span style="font-size:14px;"...
2017-03-16
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
本文实例讲述了javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法。分享给大家供大家参考。具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C/...
2017-03-23
bootstrap实现动态进度条效果
Bootstrap的动态进度条: html: 创建一个modal   这里使用fade先将modal隐藏起来,然后modal里面嵌入progress 代码很简单 <div class="modal fade" da...
2017-03-13
vue中利用axios实现文件上传进度实时更新
XHR二级增加了progress事件,我们可以据此在浏览器接收新数据期间添加实时数据进度条,从而使得交互更加友好 vue模板 <div class="progress" @click="upload&...
2017-12-19
JavaScript通过setTimeout实时显示当前时间的方法
本文实例讲述了JavaScript通过setTimeout实时显示当前时间的方法。分享给大家供大家参考。具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD...
2017-03-22
回到顶部