vue高德多条轨迹导航+带途径节点标注+各路线颜色区别

一、

引用准备

高德后台应用申请-web端

index.html 调用版本 v=1.4.2

  <body><div id="app"></div><script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.2&key=xxx你的keyxxx&plugin=AMap.Driving"></script><!-- UI组件库 1.0 --><script src="//webapi.amap.com/ui/1.0/main.js?v=1.0"></script></body>

build-webpack.base.conf.js 配置

  externals: {'AMap': 'window.AMap','AMapUI': 'AMapUI'}

二、

页面引用，我这用的是 vue

  import AMap from 'AMap'import AMapUI from 'AMapUI'

模拟数据

mockData: [{ name: '城配线路1',path: [[100.340417, 27.376994],[101.226354, 33.827452],[101.392174, 34.208439],[102.905846, 35.232876]],pathNodeName: ['城配a','城配b','城配c','城配d']},{ name: '城配线路2',path: [[100.340417, 27.376994],[107.424376, 27.222793],[113.753046, 30.046619],[118.058013, 34.970313]],pathNodeName: ['城配a','城配e','城配f','城配g']}]

页面

<div id="mapAmap2"></div>

核心使用 initMap()

initMap(lineData) {// const _this = this// 创建地图const map = new AMap.Map('mapAmap2', {zoom: 1})// 加载PathSimplifier，loadUI的路径参数为模块名中 'ui/' 之后的部分AMapUI.load(['ui/misc/PathSimplifier'], function(PathSimplifier) {if (!PathSimplifier.supportCanvas) {alert('当前环境不支持 Canvas！')return}// 启动页面initPage(PathSimplifier)})function initPage(PathSimplifier) {// 创建组件实例var pathSimplifierIns = new PathSimplifier({zIndex: 100,map: map, // 所属的地图实例getPath: function(pathData, pathIndex) {console.log('pathData', pathData)// 返回轨迹数据中的节点坐标信息，[AMap.LngLat, AMap.LngLat...] 或者 [[lng|number,lat|number],...]return pathData.path},getHoverTitle: function(pathData, pathIndex, pointIndex) {// 返回鼠标悬停时显示的信息if (pointIndex >= 0) {// 鼠标悬停在某个轨迹节点上return pathData.name + '，' + pathData.pathNodeName[pointIndex] + '，' + pointIndex + '/' + pathData.path.length}// 鼠标悬停在节点之间的连线上return pathData.name + '，点数量' + pathData.path.length},renderOptions: {keyPointTolerance: 0,renderAllPointsIfNumberBelow: 15,keyPointStyle: {radius: 6, // 点的半径fillStyle: '#FF8C00', // 填充色，比如 red, rgb(255,0,0), rgba(0,0,0,1)等strokeStyle: '#eeeeee', // 描边色lineWidth: 1 // 描边宽度},// 轨迹线的样式pathLineStyle: {strokeStyle: 'green',lineWidth: 2,dirArrowStyle: true}}})pathSimplifierIns.setData(lineData)// initRoutesContainer(d)// function onload() {//   pathSimplifierIns.renderLater()// }// function onerror(e) {//   alert('图片加载失败！')// }// console.log('lineData', lineData)let c = {}for (let f = 0; f < lineData.length; f++) {c = pathSimplifierIns.createPathNavigator(f, // 关联第1条轨迹{loop: false, // 循环播放// speed: 1000000,pathNavigatorStyle: {autoRotate: false, // 禁止调整方向pathLinePassedStyle: null,width: 24,height: 24,// content: PathSimplifier.Render.Canvas.getImageContent(_this.imgUrl_car, onload, onerror),strokeStyle: null,fillStyle: null}})c.start()}}}

效果图

vue高德多条轨迹导航+带途径节点标注+各路线颜色区别相关推荐

vue高德单条(可批量)路线规划+单条(可批量)路线带途径节点marker+单条(可批量)路线分段渲染各颜色
一功能介绍: vue高德单条(可批量)路线规划+单条(可批量)路线带途径节点marker+单条(可批量)路线分段渲染各颜色效果图(单条路线规划分段渲染颜色): 二.实现 1.本项目使用的高德ap ...
Android 高德地图之自定义导航
接着上一篇 https://blog.csdn.net/naide_s/article/details/80547320 自定义地图继续写自定义导航高德地图就不写了官方文档有的自己去看好了写 ...
vue 使用高德JSapi 实现轨迹回放和海量点效果（点击显示详情提示窗口）采用AMapLoader 和 AMapUI
第一步注册高德开发者平台账号 (个人选择个人账户) 地址见 https://lbs.amap.com/api 第二步在控制台中申请Key(输入key,选择web端,提交即可) 第三步通过JSAp ...
android底部导航栏svg,vue开发移动端底部导航条功能
效果图 src/app.vue 头部导航内容区域 import Tabbar from 'components/tabbar'; export default { name: 'App', comp ...
android高德地图轨迹偏纠,GitHub - YangHaoyi/DrawTraceDemo: 高德地图轨迹回放带定位纠偏加彩虹渐变线...
DrawTraceDemo 高德地图轨迹回放带定位纠偏加彩虹渐变线由于高德自身持续定位存在偏移状况,故摒弃了高德自身的定位点,改用自定义marker点作为定位点加注轨迹纠偏函数,根据时间判定此次移 ...
利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示先完成准备工 ...
vue[高德地图行车路径规划以及路线记录绘制操作]
最近的一个项目中需要根据需求将地图上画出一条高速公路,然后将这条高速公路的行车轨迹绘制成一条带有颜色路线以便后续插入内容. 看遍了不少高德地图的api内容以及搜索了不少的网上资源,发现可以通过路径规划 ...
vue+高德地图绘制路径
一.vue+高德地图开发最近开发项目地图用的比较频繁,比如高德地图.百度地图或者echars地图,而且大都是用来做路径展示,所以今天说说高德地图的使用(非全面的高德地图使用) 使用的是vue cli ...
vue、Steps 步骤条、Steps 属性、vue Steps 所有步骤条样式、vue Steps 步骤条全部属性
vue.Steps 步骤条.Steps 属性.vue Steps 所有步骤条样式.vue Steps 步骤条全部属性设计规则何时使用代码演示 1.基本用法 2.迷你版 3.带图标的步骤条 4.步 ...

vue高德多条轨迹导航+带途径节点标注+各路线颜色区别

vue高德多条轨迹导航+带途径节点标注+各路线颜色区别相关推荐

最新文章

热门文章