Vue项目(vuecli3.0搭建)集成高德地图实现路线轨迹绘制
2024-08-30 03:45:42
先看最后实现的效果图
高德地图api文档
https://lbs.amap.com/api/javascript-api/summary
使用
1、在index.html里面引入高德地图js文件
2、引入之后我们就直接可以在vue组件里面使用了
创建initMap方法,在mounted钩子函数中调用
mounted(){
this.initMap()
},
initMap(){
let that = this
this.map = new AMap.Map('track-map', {
zoom:11,//级别
center: [116.397428, 39.90923],//中心点坐标
resizeEnable: true,
zoom: 12,
});
// 插件
AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
that.map.addControl(new AMap.ToolBar())
that.map.addControl(new AMap.Scale())
})
// marker标记
this.marker = new AMap.Marker({
position: null
})
this.map.add(this.marker);
// 绘制折线
this.path = new AMap.Polyline({
path: null,
isOutline: false, //线条是否带描边,默认false
outlineColor: '#ffeeff',//线条描边颜色,此项仅在isOutline为true时有效,默认:#000000
borderWeight: 1, //描边的宽度,默认为1
strokeColor: "#3366FF", //线条颜色,使用16进制颜色代码赋值。默认值为#006600
strokeOpacity: 1, //线条透明度,取值范围[0,1],0表示完全透明,1表示不透明。默认为0.9
strokeWeight: 2, //线条宽度,单位:像素
// 折线样式还支持 'dashed'
strokeStyle: "dashed", //线样式,实线:solid,虚线:dashed
// strokeStyle是dashed时有效
strokeDasharray: [10, 5],//勾勒形状轮廓的虚线和间隙的样式,此属性在strokeStyle 为dashed 时有效
lineJoin: 'round', //折线拐点的绘制样式,默认值为'miter'尖角,其他可选值:'round'圆角、'bevel'斜角
lineCap: 'round', //折线两端线帽的绘制样式,默认值为'butt'无头,其他可选值:'round'圆头、'square'方头
zIndex: 50, //折线覆盖物的叠加顺序。默认叠加顺序,先添加的线在底层,后添加的线在上层。通过该属性可调整叠加顺序,使级别较高的折线覆盖物在上层显示默认zIndex:50、
})
// 将折线添加至地图实例
this.map.add(this.path);
},
上面需要注意的地方是绘制折线和添加marker标记的时候,可以设置position和path的值为空,这样进来的时候就不会在地图上创建一个标记了
this.marker = new AMap.Marker({
position: null
})
最后在ajax请求接口获取到数据后动态绘制路线轨迹
if(res.code==2000){
// 历史路径经纬度集合
let trackPath = []
this.list.forEach((item,index) => {
trackPath.push(new AMap.LngLat(item.lng,item.lat))
});
this.path.setPath(trackPath)
this.path.show()
// 将最后一条记录添加marker标记
let lastTrack = new AMap.LngLat(this.list[0].lng,this.list[0].lat)
this.map.setCenter(lastTrack)
this.marker.setPosition(lastTrack)
this.marker.show()
}
最新文章
- IOS-Foundation框架结构
- Sublime Text 3 快捷键整理
- Zabbix探索:工作时间的设置
- php join函数使用,很是方便
- 反恐训练营(LCS)
- Java中设计模式之生产者消费者模式-4
- 【原创】用python连接thrift Server 去执行sql的问题总汇
- DeepLearning.ai学习笔记(五)序列模型 -- week1 循环序列模型
- vue中前端处理token过期的方法与axios请求拦截处理
- function 函数
- laravel 中with关联查询限定查询字段
- Java 字符串类型常用方法
- lvs持久连接及防火墙标记实现多端口绑定服务
- 创建django出现的问题
- Python Subprocess Popen 管道阻塞问题分析解决
- Win7系统(台式机)设置系统的窗口背景色(豆沙绿色)
- 微信公共服务平台开发(.Net 的实现)3-------发送文本消息
- JB开发之问题汇总 [jailbreak,越狱技术]
- Unit08: 过滤器、监听器
- vscode 快速生成html
热门文章
- 记录下vue 中引用echarts 出现 ";TypeError: Cannot read property 'getAttribute' of undefined";问题
- elasticsearch查询篇索引映射文档数据准备
- JavaScript的Proxy可以做哪些有意思的事儿
- nginx之旅(第一篇):nginx下载安装、nginx启动与关闭、nginx配置文件详解、nginx默认网站
- SpringCloud学习第四章-Eureka创建
- ARM64编译工具链下载
- JavaScript三种方法获取地址栏参数的方法
- LayUI的基本使用 - Tab选项卡切换显示对应数据
- DFS_BFS(深度优先搜索 和 广度优先搜索)
- C++ CGI报“资源访问错误”问题分析