先看最后实现的效果图

高德地图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()
}

Vue项目(vuecli3.0搭建)集成高德地图实现路线轨迹绘制的更多相关文章

  1. vue集成高德地图

    vue集成高德地图 前言 二.使用步骤 1.注册高德开发平台 2.vue 结尾 前言 之前玩Thymeleaf的时候玩过高德地图,现在无聊Vue项目也整个地图进去~ 二.使用步骤 1.注册高德开发平台 ...

  2. Vue组件篇——Vue3.0中使用高德地图

    VUE-CLI 3.0 中配置高德地图 在项目开发中,地图组件 1.首先,需要注册高德开放平台的账号,并在[应用管理]页面[创建新应用],为应用添加Key值 高德开放平台:https://lbs.am ...

  3. vue-cli3.0 搭建项目

    1.首先我们先在安装好node   node用于npm安装[自行百度] 2.全局安装vue 通过npm命令安装vue.js 在用vue.js在用于构建大型的应用时推荐使用npm安装,npm能很好的和w ...

  4. Vue-Cli 3.0 中配置高德地图

    vue 中使用高德地图有两种方式 一.vue-amap 组件 官网: https://elemefe.github.io/vue-amap/#/ 开始的时候是打算用这个组件做地图功能的,但是尝试之后存 ...

  5. web集成高德地图

    1.使用高德地图API需到官网添加一个Key,http://lbs.amap.com/dev/key/app 2.页面头引入 <div id="addressMap"> ...

  6. Vue:Vue2.0搭建脚手架

    随着Vue.js越来越火爆,更多的项目都用到Vue进行开发,在实际的开发项目中如何搭建脚手架呢?今天就来跟大家分享一下如何使用vue-cli搭建脚手架. 一.安装node.js 1.进入官网https ...

  7. Android集成高德地图如何自定义marker

    高德地图自定义Marker 高德地图默认的marker样式是这种 一般的修改样式是通过icon接口来调整 MarkerOptions markerOptions = new MarkerOptions ...

  8. Vue ---- 项目与环境搭建 初始项目结构 Vue生命周期

    目录 1. vue环境搭建 2. Vue项目搭建 pycharm配置并启动vue项目 3 . 认识项目 1. vue项目目录结构 2. 配置文件:vue.config.js 3. main.js 4. ...

  9. vue项目环境的搭建

    首先要明白Vue是基于node的,在公司要使用vue来开发项目的话肯定是要先安装node的,下面是搭建一个最简单的vue项目环境 一 安装node 这个可以去node的官网下载对应版本 安装好之后 c ...

随机推荐

  1. App过大

    最近开发中遇到一个报错信息 如下 Error:Cannot fit requested classes in a single dex file.Try supplying a main-dex li ...

  2. SpringBoot自定义Condition注解

        最近碰到个这样的需求,需要同一套代码适配个版本数据库(数据库不同,且部分表的字段及关联关系可能会不同),即这套代码配置不同的数据库都能跑.项目采用的框架为SpringBoot+Mybatis. ...

  3. sqlmap基本信息及参数使用方法

    当给sqlmap这么一个url的时候,它会: 1.判断可注入的参数 2.判断可以用那种SQL注入技术来注入 3.识别出哪种数据库 4.根据用户选择,读取哪些数据 sqlmap支持五种不同的注入模式: ...

  4. 网络编程(二)--TCP协议、基于tcp协议的套接字socket

    一.TCP协议(Transmission Control Protocol 传输控制协议) 1.可靠传输,TCP数据包没有长度限制,理论上可以无限长,但是为了保证网络的效率,通常TCP数据包的长度不会 ...

  5. JMETER 使用JDBC查找数据作为参数

    有些情况下我们需要读取平台中的用户作为参数,比如用户ID作为参数进行压力测试,我们可以使用CSV文件,如果这样做,需要每一次 都构造文件,比较麻烦.如果可以查询数据库,将查出的数据作为参数循环传入的话 ...

  6. 201871010131张兴盼《面向程序设计(java)》第四周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  7. mysql的基本数据类型里几个int如下:TINYINT SMALLINT  MEDIUMINT  INT或INTEGER   BIGINT

    mysql的基本数据类型里几个int如下:类型           大小 范围(有符号) 范围(无符号) 用途 TINYINT  1字节   (-128,127)    (0,255) 小整数值 SM ...

  8. date命令的FORMAT中输入空格的几种方法

    1.date +%Y-%m-%d\ (一个空格)%H:%M:%S 此命令中用了转义字符 \ ,将空格转义出来 2.date +%Y-%m-%d'  '%H:%M:%S 此命令中的单引号内可以是一个或多 ...

  9. 原生ajax分页,无刷新分页,最简化。超简单,代码最少

    <html><script> var page=1; // 页面第一次加载,显示第一页 window.onload=function(){ ajax_go(1) } //分页的 ...

  10. jQuery的核心对象、原型对象、静态方法、动态方法

    什么叫jQuery的核心对象? $ $===jQuery 什么叫jQuery的原型对象? $.fn $.fn===$.prototype 什么叫静态方法? 在构造函树上定义的方法,静态方法通过构造函数 ...