vue高德地图(amap-jsapi-loader)页面与组件使用(AMapUI 组件库)
AMapUI 组件库:https://lbs.amap.com/api/amap-ui/intro
引入amap-jsapi-loader:https://blog.csdn.net/qq_32707555/article/details/123063459
效果图参考高德地图UI组件示例:https://lbs.amap.com/demo/amap-ui/demos/amap-ui-pathsimplifier/simple-demo
getHoverTitle事件对应的就是显示鼠标移到轨迹线上,显示的文字。就像上图 路线0,点数量12
setData()设置轨迹数据,path的第一个坐标是起点坐标,最后一个是终点坐标,中间是途径坐标,如果你要轨迹显示2点的直线,那么只要起点和终点坐标就可以。
start()是创建一个巡航器,简单来说就是开始跑轨迹。
setData()设置的是一个数组,可以创建多条轨迹路线,上图第一个红框的0就是选择数据里的第一个对象进行创建,有多个的话,就可以创建多条。
ps:怎么引入具体看上面的链接
init(){let that = thisAMapLoader.load({key: '', // 申请好的Web端开发者Key,首次调用 load 时必填version: '1.4.15', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15plugins: ['AMap.PlaceSearch','AMap.Geocoder', 'AMap.Driving'], // 需要使用的的插件列表,如比例尺'AMap.Scale'等Loca: {//这个是数据可视化version: '1.3.2',},AMapUI: {//重点就是这个version: '1.0',plugins: ['misc/PathSimplifier','overlay/SimpleMarker']//SimpleMarker设置自定义图标,PathSimplifier轨迹展示组件}}).then((AMap)=>{var map = new AMap.Map('container', {mapStyle: 'amap://styles/midnight',//这个是设置地图模块,没有项目要求就这样zoom: 11.5,//初始地图级别//center: center,//设置地图的中心点features: ['bg', 'road', 'point'], //point 显示出地图的省市区名称// viewMode: '3D', //高德地图JS API UI组件库-海量点展示、轨迹展示不支持3D地图})AMapUI.loadUI(['misc/PathSimplifier','overlay/SimpleMarker'],function(PathSimplifier,SimpleMarker){var lngLatsa = map.getCenter()//获取中心点的经纬度new SimpleMarker({//自定义图标地址iconStyle:{src:"",//网络地址路径,本地不行style:{width:'80px',height:'80px'}},//设置基点偏移offset: new AMap.Pixel(0, 0),anchor:'center',map: map,showPositionPoint: false,position: lngLatsa,zIndex: 100});})//开始轨迹var emptyLineStyle = {lineWidth: 0,fillStyle: null,strokeStyle: null,borderStyle: null};var pathSimplifierIns = new PathSimplifier({zIndex: 100,map: map, //所属的地图实例getPath: function(pathData, pathIndex) {return pathData.path;},getHoverTitle: function(pathData, pathIndex, pointIndex) {return null;},//这些参数详情查看 https://lbs.amap.com/api/amap-ui/reference-amap-ui/mass-data/pathsimplifierrenderOptions: {//将点、线相关的style全部置emptyLineStylepathLineStyle: emptyLineStyle,pathLineSelectedStyle: emptyLineStyle,pathLineHoverStyle: emptyLineStyle,keyPointStyle: emptyLineStyle,startPointStyle:emptyLineStyle,endPointStyle: emptyLineStyle,keyPointHoverStyle: emptyLineStyle,keyPointOnSelectedPathLineStyle: emptyLineStyle}});//设置轨迹数据 that.lines是我项目的数据,具体根据自身项目设置pathSimplifierIns.setData(that.lines);//因为可能存在多条路径,所以循环设置that.lines.forEach((item,index)=>{//创建巡航器 移动轨迹 index是重点let navg = pathSimplifierIns.createPathNavigator(index, {loop: true,speed: 10000,//轨迹的速度 单位是km/hpathNavigatorStyle: {width: 24,height: 24,strokeStyle: null,fillStyle: null,//经过路径的样式pathLinePassedStyle: {lineWidth: 2,strokeStyle: 'orange',//轨迹线的颜色},},});navg.start();//到这边就完成了})})
}
个人本身不怎么擅长语言编辑,有一些词大概意思懂了就行。参数的话,不懂的可以查下高德或者百度下。
vue高德地图(amap-jsapi-loader)页面与组件使用(AMapUI 组件库)相关推荐
- vue+高德地图实现多边形范围内标点
vue+高德地图实现多边形范围内标点 具体实现: 一.安装并引入高德地图: 二.创建一个aMap地图文件: 三.aMap上创建多边形围栏: 四.配置围栏.地图点击事件: 五.地图点击标点事件: 本篇文 ...
- Vue+高德地图API的使用(定位打卡)
接上之前的项目 Vue+高德地图API的使用 Vue+高德地图API的使用(插件的使用) 1.页面布局 绘制页面 <div class="Clock"><!-- ...
- 利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹 高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示 先完成准备工 ...
- vue+高德地图绘制路径
一.vue+高德地图开发 最近开发项目地图用的比较频繁,比如高德地图.百度地图或者echars地图,而且大都是用来做路径展示,所以今天说说高德地图的使用(非全面的高德地图使用) 使用的是vue cli ...
- vue 给圆遮盖物添加文字 高德地图_通过 Vue + 高德地图 JS API 在地图上标记咖啡店...
通过 Vue + 高德地图 JS API 在地图上标记咖啡店 由 学院君 创建于2年前, 最后更新于 2年前 版本号 #1 在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的 ...
- 十分钟玩转 vue3+高德地图AMap+geojson批量绘制Polygon地块数据展示【二、创建地图】
十分钟玩转 vue3+高德地图AMap+geojson批量绘制Polygon地块数据展示[二.创建地图] 在template标签内创建下列DOM 1.在template标签内,创建container的 ...
- Vue 高德地图 js API Loca 如何使用 连接线图层、脉冲连线图层
Vue 高德地图 js API Loca 如何使用 连接线图层.脉冲连线图层 阅读此文你需要已经了解并掌握的: 已经会使用常规地图的生成方式 已经了解如何载入 Loca 插件 如果不了解,可以查看我之 ...
- vue + 高德地图 + wind-layer实现风场
vue + 高德地图 + wind-layer实现风场 效果图: 第一步:引入 wind-layer插件 或者 npm install ol-wind npm install amap-wind ht ...
- vue使用高德地图aMap实现轨迹动画查询显示
vue使用高德地图搜索地址添加标记marker,定位,拖拽选址功能https://blog.csdn.net/SmartJunTao/article/details/123955679 实现效果: 需 ...
- vue 高德地图Loca.GeoJSONSource、Loca.PolygonLayer绘制3D楼房、AMap.LabelMarker文字标注、Loca.ScatterLayer绘制水波扩散效果
创建地图 假设已经正确引入了高德地图,这里使用2.0版本,注意了,1.4.x版本的使用和2.x版本的使用方式不一样.有很多地方不兼容哦. 话说3D效果这一块,高德是真比不上百度地图哦,要不是项目一直用 ...
最新文章
- 2022-2028年中国硅藻土产业发展态势及市场发展策略报告
- html中alert的用法_【渗透实战】通过HTML命名空间混淆绕过DOMPurify实现XSS
- z最大子数组c语言,关于最大子数组问题
- JAVA程序设计----多线程(下)
- RPC 远程过程调用协议
- gRPC-go 入门(1):Hello World
- python监控网页内容变化_使用Python监控文件内容变化代码实例
- php获取数据3中方式,PHP面向对象之3种数据访问方式详解(代码实例)
- java如何让源码加密还能运行_如何有效防止Java程序源码被人偷窥?
- 用flashAS3.0做一个连线题
- FFmpeg 和 MP4Box 几个命令
- HDU 6070 Dirt Ratio
- c语言岩石1ms,2017年注册岩土工程师基础考试真题下午和答案解析
- 金属,还是Disturbed的好。
- iOS开发一路走来看到,好奇,好玩,学习的知识点记录
- 利用ADS快速设计低噪放
- Linux系统 ELK(8.3.1)单机环境搭建
- Scratch 3.0建站指南(一)
- Android 后台开发
- MAC OS部署 TOMCATJ2EE项目
热门文章
- android studio override报错,android studio中的@Override
- 新手机安装好sim卡显示无服务器,为什么手机突然显示无sim卡_突然检测不到sim卡的处理办法...
- Elasticsearch文档操作
- 力扣455.分发饼干(java)-贪心算法思想及基本步骤
- Java语言中运算符号优先级
- 【S13】vector和string优先于动态分配的内存
- Eclipse的超级详细的安装和配置(在windows11x64下
- WPS和OFFICE同时安装导致OLE写excel时EXCEL.APPLICATION失败
- 读取MP3文件的ID3v1信息
- Java 如何复制 List ?