AMap初级实战之二(MoveAnimation moveTo、moveAlong)

淩亂°似流年 2022-12-19 13:08 242阅读 0赞

上一篇 是amap[ 点标记方式闪动][Link 1],通过websocket推送单个经纬度，后来用moveAlong实现了动画；代码如下图一图二；每次推送都会报"id of undefined",但是动画能动，![202011071651371.png][]不想管了，算是遗留了债；一个月后做小程序推送，瞄一眼web推送时，动画只会动一次，然后就再也不动了，心中大喊一时“ 不好”  F12一看仅有一个"id of undefined" 下面全是“chain of undefined”;图三； 百度三分钟没搞定就知道要还债了，

![20201107164906793.png][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQ3MzIx_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQ3MzIx_size_16_color_FFFFFF_t_70 1][]

一度搞得我都想换[巡航轨迹，这老哥总结的还可以][Link 2]; 感觉程序猿嘛不就是解决bug,原因总要找到的吧，淦；报错信息Array Foreach 以为传入的数据格式不对，这个错误想法导致浪费吃两盘鸡的时间，那就直接搜下MoveAnimation 官网文档就仔细看了moveto movealong用法[https://lbs.amap.com/api/javascript-api/reference/overlay][https_lbs.amap.com_api_javascript-api_reference_overlay]；，然后看了一篇特征说2.0对[Marker 的moveTo、moveAlong接口升级  官网说][Marker_moveTo_moveAlong_]**明：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQ3MzIx_size_16_color_FFFFFF_t_70 2][]

> 错误原因是：每对 这句话理解透彻：  插件**加载完成之后**，`Marker`**将都获**得`moveTo`和`moveAlong`的**能力**。官方解释的都很详细   切记要理解这句话，就明白了

don't say so much

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQ3MzIx_size_16_color_FFFFFF_t_70 3][]![20201107172047383.png][]

> ps: 高德地图今年三月份新发的2.0版本中   对于moveTo的定义又进行了改变
> 
> `Marker`** 的**`moveTo`**、**`moveAlong`**接口升级**
> 
> **<script src = 'https://webapi.amap.com/maps?v=2.0&key=您申请的key值' type="text/javascript" > </script>**
> 
> 这两个接口在API `2.0`版本中需要先加载`AMap.moveAnimation`插件，插件加载完成之后，`Marker`将都获得`moveTo`和`moveAlong`的能力。
> 
> JSAPI 2.0 的 `moveTo、moveAlong` 方法可以支持更丰富的设置，如动画持时间，动画延迟时间，及分段设置动画时间等。
> 
> moveTo可以让marker以给定的速度从一个经纬度移动到另一个经纬度**并自动调整车头方向(车头方向与起点到终点的直线平行)**。也可以看做moveTo是moveAlong分步主动调用。

\----------

另外因为是小火车所以加上websocket位置作动画的时候，播放火车的声音，地图上的小火车嘟嘟嘟的跑至此交作业了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQ3MzIx_size_16_color_FFFFFF_t_70 4][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQ3MzIx_size_16_color_FFFFFF_t_70 5][]

[Link 1]: https://blog.csdn.net/qq_32447321/article/details/108275566
[202011071651371.png]: /images/20221120/7dc530be05c141fd8044af0d48df7dca.png
[20201107164906793.png]: https://img-blog.csdnimg.cn/20201107164906793.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQ3MzIx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201107164855258.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQ3MzIx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQ3MzIx_size_16_color_FFFFFF_t_70 1]: /images/20221120/4340ed3ea2c345a99d484c28daac60c7.png
[Link 2]: https://blog.csdn.net/weixin_40579884/article/details/89675275?utm_medium=distribute.pc_relevant.none-task-blog-title-2&spm=1001.2101.3001.4242
[https_lbs.amap.com_api_javascript-api_reference_overlay]: https://lbs.amap.com/api/javascript-api/reference/overlay
[Marker_moveTo_moveAlong_]: https://lbs.amap.com/api/jsapi-v2/update
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQ3MzIx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201107171211134.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQ3MzIx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQ3MzIx_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201107172005543.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQ3MzIx,size_16,color_FFFFFF,t_70
[20201107172047383.png]: https://img-blog.csdnimg.cn/20201107172047383.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQ3MzIx_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201107181214625.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQ3MzIx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQ3MzIx_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2020110718105561.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQ3MzIx,size_16,color_FFFFFF,t_70