vue使用google地图（二）实现标记实时运动（基于websocket）

最近外卖项目，需要实现一些地图的功能，前几天写了一个关于marker 和 InfoWindow、自定义label的文章，只是简单地例子。详情点击vue中使用google地图（自定义label、信息窗口）

有不懂的欢迎留言，我每天都上博客，一定及时回复大家，如有不足希望批评指正。

那么，今天在这里写一个曾经我可望而不可即的功能，外卖骑手实时在地图上运动。具体需求是点击按钮创建弹窗，并且创建地图与websocket创建长连接。这个功能的原理是什么呢，我在这里把我的思路一一介绍，也算是记录心得。需求如下图：

 

• 1、先创建地图实例，并在地图初始化的时候就渲染初始的骑手标记（也就是marker）
• 2、建立websocket连接，获取数据
• 3、在服务端给我数据的时候，清除地图上所有的marker，然后再重新添加，这里是最重要的一步，实现实时刷新标记的重要步骤，一定要先清除再进行添加
• 4、地图标记线，也就是骑手历史路径也要在websocket发送消息的时候进行添加，

以上就是主要的步骤。在写项目的时候，遇到一个异步的坑，因为初始化地图和websocket连接的过程有一些时间差，说白了就是异步了，导致websocket给我发送的消息并不能及时渲染到地图上，我这边是在请求一个接口拿到后端给的数据后再进行地图初始化，一定要在地图初始化之后再进行连接，不同项目有不同需求，我这里只以我的