高德地图JSAPI2.0轨迹回放marker移动中地图不会实时加载

最新推荐文章于 2024-07-27 14:36:20 发布
最新推荐文章于 2024-07-27 14:36:20 发布
阅读量324 收藏
点赞数 7
文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/orgd210jiangliang/article/details/140429651
版权

问题描述

高德地图从1.x升级到2.0之后轨迹回放的时候marker在移动中地图不会实时加载，只会有大概的轮廓，不会加载建筑文字，暂停时才会加载出来。
下图是移动中跟暂停后的区别。
在这里插入图片描述
在这里插入图片描述

解决办法

在引入地图JSAPI 资源文件之前，使用script 设置 window.movingDraw = true

想当将军的小厨子
关注
  • 7
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
高德地图——轨迹回放和电子围栏
xiaoququ的博客
03-21 1051
【代码】高德地图——轨迹回放和电子围栏。
vue中使用高德地图（JSAPI2.0示例）
04-28
参考高德地图官网的示例实现的。
高德地图地图 JS API 2.0 基本使用
ioncannontic的博客
05-26 457
高德地图地图 JS API 2.0 基本使用
uniApp + vue2语法 + 高德AMap API2.0 + MoveAnimation插件 + marker.moveAlong方法 实现 车辆轨迹回放
zhongwenhao123的博客
02-21 1465
如果有新车的话 添加新的车辆覆盖物 在高德地图JSAPI2.0 使用覆盖物动画必须先加载动画插件MoveAnimation 存了一个自定义属性为这个车的车牌号 当做暂时性的唯一标识。已到站的车辆 在地图上清除 因为到站车辆可能是多个 所以这里传入的是一个数组 通过添加覆盖物时定义的自定义属性 车牌号 找到对应的覆盖物 清除。获取到数据后 判断是否有新出发的车辆 和 是否有已到站的车辆 busList 是一个车辆集合。该加的加上了 该清的清掉了 就可以 让最新的车辆集合 跑起来 计算车辆运行轨迹。
vue结合高德地图JS API2.0实现地图路线展示、轨迹纠偏、聚合点、聚合点点击以及弹窗、车辆移动
weixin_43996368的博客
06-08 2744
地图样式 地图加载方法 车辆移动 展示
android 高德地图历史轨迹回放速度进度暂停播放。
SXH_Android的博客
09-03 4040
背景：项目需求。要求历史轨迹回放要能播放、暂停，对播放进度控制，播放速度控制，刚开始以官方demo的平滑移动作为demo进行开发，但是发现没法控制进度，速度只有一个API smoothMarker.setTotalDuration(40); 但是都没办法根据需求进行设置。速度太快信息框都有时跟不上会闪动。 所以理清思路： 分以下几个步骤 首先是后台返回经纬度数据列表 1.根据数据列表在地图...
【GIS】利用高德地图API绘制轨迹
hanv79的博客
03-06 1134
本次实验使用了高德地图API轨迹的绘制。
高德地图——车随轨迹点移动
who_become_gods的博客
12-02 4637
经常有人问怎么控制车辆车头方向随着行进方向改变, 怎么展示车辆运行轨迹 在高德地图中展示车辆轨迹有三种方法，一种方法是AMapUI的PathSimplifier创建巡航器来展示轨迹： 高德地图轨迹展示示例 第二种方法是使用moveAlong,moveAlong可以让marker按照给定的经纬度数组以指定的速度移动 高德地图轨迹回放示例 第三中方法是使用moveTo，moveTo可以让marker以给定的速度从一个经纬度移动到另一个经纬度并自动调整车头方向(车头方向与起点到终点的直线平行)。也可以看做move
基于高德地图JSAPI开发的移动端示例【100012427】
05-24
总结起来，这个项目展示了高德地图JSAPI在移动端应用开发中的强大能力，从定位到导航，再到地址处理，都体现了地图服务在现代移动应用中的核心地位。开发者通过熟练运用这些API，能够创建出功能丰富的地图应用，满足...
高德地图JSAPI结合Vue2使用
08-19
JSAPI结合Vue2示例安装包
利用百度地图实现路书实时轨迹边走边划
07-12
在IT行业中，实时轨迹追踪是一项重要的技术应用，尤其在导航、物流、运动健身等领域有着广泛的应用。本篇文章将深入探讨如何利用百度地图API实现“路书实时轨迹边走边划”的功能。 首先，我们需要理解“路书”和...
vue中使用高德地图-加载高德地图几种方法
03-12
### vue中使用高德地图-加载高德地图几种方法 #### 一、前言与基础知识 在当前的应用开发中，地图服务已经成为了不可或缺的一部分。无论是网约车应用还是生活服务类应用，地图服务都提供了强大的功能支持。本文将...
高德地图 js API 实现拖动变换 Marker 坐标位置
最新发布
学习笔记
07-27 554
之前已经说过了很多关于高德地图的自定义标记点的方法，这里不再冗述。通过这个功能，我已经实现了一个可以展示标记点信息的工具，如下：这个信息页的展示还有一个编辑器，是这样的：在使用中遇到一个问题，就是在手动定义好位置之后，想修改它的坐标位置。，拖动到哪，就以那的坐标位置作为这个点的位置。
高德api之贝塞尔曲线
weixin_41486438的博客
10-20 698
本文只针对贝塞尔曲线的使用，基础引用请看el-amap的使用 高德api原地址：https://lbs.amap.com/api/javascript-api/example/overlayers/beziercurve-draw-and-edit <!-- 贝塞尔曲线 --> <el-amap-bezier-curve v-for="line...
vue、angular结合高德地图实现镜头追踪+轨迹运动效果、切换视图、分段动画、无缝衔接 封装
m0_67862954的博客
03-18 515
【代码】angular结合高德地图实现镜头追踪+轨迹运动效果、切换视图、分段动画、无缝衔接 封装。
高德地图 js API Loca 3D动画的使用说明
学习笔记
07-09 2716
高德地图 API Loca 动画的说明 我们在使用 Loca 制作地图动画时，里面有几个对应的动画效果，有 center: 平移 pitch: 视角 zoom: 缩放 rotation: 旋转 来看一下代码对应的不同动画效果，就很明确的知道动画是怎样制作的了 具体的例子可以查看这里： https://kylebing.cn/tools/riding-map/ Loca 的官方说明 https://lbs.amap.com/api/loca-v2/intro center center: {
高德地图升级v2.0踩坑日记
song_xz的博客
11-29 1859
本文适用于需要将接入了高德地图 JSAPI v1.3 或者 v1.4.X 版本的地图应用升级到 v2.0 的开发者阅读
Window 消息大全使用详解
cwxiao888的专栏
02-17 1596
消息，就是指Windows发出的一个通知，告诉应用程序某个事情发生了。例如，单击鼠标、改变窗口尺寸、按下键盘上的一个键都会使Windows发送一个消息给应用程序。消息本身是作为一个记录传递给应用程序的，这个记录中包含了消息的类型以及其他信息。例如，对于单击鼠标所产生的消息来说，这个记录中包含了单击鼠标时的坐标。这个记录类型叫做TMsg，它在Windows单元中是这样声明的：typeTMsg = p
vue3.0中使用高德地图2.0，车辆轨迹回放，车辆暂停之后地图会移动到地图的中心
07-12
在Vue 3.0中使用高德地图 2.0实现车辆轨迹回放时，当车辆暂停后地图移动到地图的中心，可以按照以下步骤进行操作： 1. 首先，在Vue项目中安装高德地图2.0的SDK。可以使用npm或者yarn等工具进行安装。 ```bash npm install @amap/amap-jsapi-loader ``` 2. 在Vue组件中引入高德地图的SDK。 ```javascript import AMapLoader from '@amap/amap-jsapi-loader'; ``` 3. 在Vue组件的mounted钩子函数中加载地图并初始化。 ```javascript mounted() { AMapLoader.load({ key: 'your_amap_api_key', version: '2.0', plugins: ['AMap.Driving'], }).then((AMap) => { // 初始化地图 const map = new AMap.Map('mapContainer', { zoom: 13, // 初始缩放级别 center: [lng, lat], // 初始地图中心点坐标 }); // 其他地图操作逻辑，如添加车辆标记、轨迹回放等 }); }, ``` 4. 监听车辆暂停事件，在暂停时将地图移动到中心点。 ```javascript // 假设有一个暂停按钮，点击按钮后触发暂停事件 handlePause() { // 获取地图对象 const map = this.map; // 获取地图中心点坐标，可以根据具体需求从车辆标记或轨迹数据中获取 const center = [lng, lat]; // 将地图移动到中心点 map.setCenter(center); }, ``` 通过以上步骤，在Vue 3.0中使用高德地图2.0实现车辆轨迹回放时，当车辆暂停后地图会移动到地图的中心。注意替换代码中的`your_amap_api_key`为你的高德地图API密钥，并根据实际需求调整地图初始化参数和获取中心点的逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值