vue3高德物流路线

原创已于 2024-08-22 17:44:09 修改 · 202 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#arcgis

于 2023-09-10 22:43:21 首次发布

1.Web开发-JSAPI文档

流程：

如：key 4eed3d61125c8b9c168fc22414aaef7e
如：jscode 415e917da833efcf2d5b69f4d821784b

在vue3项目中使用

代码：

按 NPM 方式使用 Loader，安装

pnpm i @amap/amap-jsapi-loader

配置安全密钥 securityJsCode
根据参考示例-使用经纬度获取驾车规划数据，获取路线规划方案
说明❓：通过插件引入
关闭路线规划默认 marker 标记，自定义 marker 标记

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

LiliRush

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue + 高德精准定位（示例）

走向CTO的路上...

07-21

2519

要在 Vue 中实现高德精准定位，可以使用 AMap JavaScript API 和 Vue.js 之间的集成插件 vue-amap。方法配置高德地图 API，包括 API key、插件集合和 SDK 版本。方法使用高德地图定位插件获取当前位置信息，并在定位成功后调用。和高德地图 API 在 Vue 项目中实现精准定位的示例代码。在地图上添加标记，并将地图中心设置为定位点。方法，以避免出现地图容器未渲染完毕就调用。方法，确保地图容器已经渲染完毕后再调用。方法初始化高德地图，使用。方法在地图上显示定位点。

vue3+ts+高德地图+物流轨迹

weixin_51290060的博客

04-21

1724

vue3+ts+高德地图+物流轨迹

参与评论您还未登录，请先登录后发表或查看评论

vue3 使用高德地图实现线路规划功能

m0_66809960的博客

08-29

880

1.引入百度api值public文件夹index.html。

基于高德地图实现vue3的移动端物流路线相关功能

奔跑吧代码

05-26

2799

基于高德地图实现vue3的移动端物流路线相关功能

vue3ts + 高德地图实现自定义位置标定、轨迹

weixin_42285486的博客

07-12

1091

创建高德地图key和安装依赖参考链接。

VUE实现高德地图轨迹绘制

hyupeng1006的博客

05-16

7143

步骤：安装依赖 npm install vue-amap -S main.js中注册 import AMap from 'vue-amap' Vue.use(AMap) AMap.initAMapApiLoader({ key: '你申请的key', plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap..

vue3中使用高德地图进行轨迹绘制及播放

qq_54551471的博客

08-05

1552

vue3中实现高德地图引入，进行轨迹绘制及轨迹播放

vue vmap 高德地图路线规划

weixin_43873114的博客

03-17

901

组件 <template> <div class="map-wrap"> <el-amap :amap-manager="amapManager" :zoom="14" :center="centerPosition" vid="amapDemo" ref="reds" style="...

关于vue使用高德地图vue-amap实现路径规划

你好的博客

10-19

4183

1 在main.js里面应用要使用的组件等当然呢要先安装整个vue-amap 2 在使用页面中使用 <div class="amap-page-container" style="height: 100vh"></div>//地图的出现 //路径规划的一些详细路线显示 <div id="panel" style=" position: fixed; z-index: 150; bott

vue3使用高德地图展示物流信息

weixin_43676252的博客

01-11

793

注册获取key和jscode。

使用vue+echarts世界地图航线路线

jq.wang

06-30

2111

vue结合echarts做的船舶轨迹运行线路图；

高德地图路线规划途径点vue3

issa的博客

12-18

1643

在vue2中，需要安装vue-amap来进行操作，但是在vue3就不支持了，就用原生的amap来。

vue3+element-plus 高德地图路径规划

chensi520的博客

01-06

882

【代码】vue3+element-plus 高德地图路径规划。

vue 3.0高德地图【marker点击显示驾车路线规划】

weixin_44185995的博客

01-16

615

【代码】vue 3.0高德地图【marker点击显示驾车路线规划】

高德地图系列（四）：vue项目利用高德地图实现车辆的路线规划

qq_45796592的博客

11-15

4056

vue项目利用高德地图实现车辆的路线规划详细教程

高级前端工程师

05-11

8079

vue2，vue3，高德地图，vue高德地图，起点到终点，地图轨迹，路径规划，驾车轨迹图，利用高德地图实现车辆的路线规划，高德地图轨迹绘制，路段详细导航信息，vue实现高德地图路线规划功能，规划路线后如何获取途径的路段信息，途径数据，导航，导航详细数据，vue导航规划，导航路线规划绘制，导航规划后怎么获得途径的各路段，vue3使用高德地图，vue高德地图实现路线规划（含途经点），途径点详细数据，高德地图途径点怎么获取，行车路径规划起始点+途经点，导航途径点数据用什么api，路线规划设置途经点，详细教程，高

vue中使用three，绘制3d场景--obj模型加载

qq_38008116的博客

03-25

4494

二，模型加载在three官方文档中可以看到有多种加载器，这里我采用的是objLoader，obj模型是产品给的，关于3d建模不是很清楚就不说了。关于模型，我这里用到了两个文件（其实是产品就给了两个，模型不同文件个数不一定，有的可能还会用到图片）。分别是obj和mtl文件，obj文件即3d模型，但是他只有形状，没有外观，如色彩啊等等，所以需要mtl材质文件。（1）加载模型，需要使用加载器。这里...

vue3+vite项目中如何实现中国地图的展示，有划线，可放大缩小

THY0827的博客

11-28

812

2.map.vue文件中去写地图代码。4.地图组件中代码如下。3.当然可以封装成组件。

vue3+高德地图

qq_53541336的博客

08-22

666

今天来实现一个小型的案例，如何利用vue3实现高德地图在页面展示的效果。5.后续便是添加一些标记、覆盖物、信息窗体等。4.定义一个map对象并且初始化地图。1.NPM 安装 Loader。

vue 高德地图物流轨迹绘制

最新发布

01-12

### 在 Vue 中使用高德地图 API 实现物流轨迹绘制 #### 初始化项目并引入高德地图 API 为了在 Vue 项目中集成高德地图 API 并实现物流轨迹绘制，需先确保已成功引入高德地图 JavaScript API。这可以通过在 `public/index.html` 文件内的 `<head>` 标签里加入如下脚本标签完成： ```html <script src="https://webapi.amap.com/maps?v=2.0&key=您的高德开发者Key"></script> ``` 此操作使得整个应用能够访问到 AMap 对象及其方法[^3]。 #### 创建地图实例与配置基础参数接着，在组件内部定义一个初始化函数来创建地图对象，并设置其基本属性如中心位置、缩放级别等。通常建议将此类逻辑封装于生命周期钩子内执行，比如 mounted() 或者 setup 函数之中（视所使用的 Vue 版本而定）。下面是一个简单的例子展示如何做到这一点： ```javascript import { ref, onMounted } from 'vue'; export default { name: "LogisticsTrack", setup() { let map = null; const initMap = () => { map = new AMap.Map('container', { zoom: 10, center: [116.397428, 39.90923], // 默认北京天安门作为初始中心点 }); loadPathData(); }; onMounted(() => { initMap(); }); return {}; } } ``` 上述代码片段展示了如何利用 Composition API 来构建响应式变量以及挂载事件处理程序；当然也可以采用 Options API 方式编写相同的功能。 #### 加载路径数据并绘制轨迹线条当完成了地图的基础搭建之后，则可以着手准备加载实际的物流运输路线坐标集合——即所谓的“路径数据”。这些数据往往由一系列地理坐标组成，代表货物在整个配送过程中经过的不同地点。一旦获得了这样的数组形式的数据集，就可以调用 AMap.Polyline 方法将其渲染成可视化的线路图形显示出来： ```javascript const pathCoordinates = [ [经度1,纬度1], [经度2,纬度2], ... ]; function drawRoute(mapInstance) { var polyline = new AMap.Polyline({ path: pathCoordinates, strokeColor: "#FF33FF", // 线颜色 strokeWeight: 6, // 线宽 strokeOpacity: 0.9 // 线透明度 }); polyline.setMap(mapInstance); } // 假设这是异步获取真实路径的方法 async function loadPathData(){ try{ // 这里模拟了一个请求过程，请替换为真实的接口调用 await delay(500); console.log("path data loaded"); drawRoute(map); }catch(error){ console.error("Failed to fetch path data:", error); } } function delay(ms){return new Promise(resolve=>setTimeout(resolve,ms));}; ``` 这里值得注意的是，对于大型项目的开发而言，应当考虑从服务器端拉取最新的路径信息而不是硬编码固定不变的位置列表。此外，还可以进一步优化用户体验，例如允许用户点击某一段路程查看更详细的描述或者关联的照片等内容[^2]。 #### 添加动画效果以模拟车辆移动为了让视觉呈现更加生动形象，可以在已经画好的路线上添加一个小图标用来表示正在运送物品的交通工具（如卡车），并通过定时器不断更新该图标的地理位置从而达到仿真的目的。具体做法是在每次改变 marker 的 position 属性之前计算下一个目标坐标的值，直到遍历完所有的节点为止： ```javascript let index = 0; function animateMarker(markerInstance) { if(index >= pathCoordinates.length - 1){ clearInterval(timerId); return ; } index++; setTimeout(function(){ markerInstance.setPosition(pathCoordinates[index]); animateMarker(markerInstance); }, intervalTime * Math.random()); } var marker = new AMap.Marker({ icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", position: pathCoordinates[0] }); marker.setMap(map); animateMarker(marker); ``` 这段代码实现了基于时间间隔随机变化的速度前进的效果，其中 `intervalTime` 可根据需求自行设定合适的毫秒数值来控制速度快慢。另外，如果希望提供给访客更多交互选项的话，不妨增加一些控件让用户能自由调节播放速率甚至暂停/继续当前动作[^1]。