vue人员轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制
1.第一步
vue中使用cdn引入高德地图,并在main.js中进行全局配置。(百度上有高德地图引入与配置方法,这里就不详细介绍);
1)npm install vue-amap --save
2)
import VueAMap from ‘vue-amap'
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: ‘********************',//自己在高德地图平台上的key值
plugin: [‘AMap.Autocomplete', ‘AMap.PlaceSearch', ‘AMap.Scale', ‘AMap.OverView', ‘AMap.ToolBar', ‘AMap.MapType', ‘AMap.PolyEditor', ‘AMap.CircleEditor',‘AMap.ControlBar',‘AMap.MouseTool',‘AMap.GeometryUtil',‘AMap.DistrictSearch'],//需要的高德地图插件,需要什么插件添加什么插件(这里只是其中一部分)
// 默认高德 sdk 版本为 1.4.4
v: ‘1.4.4',
uiVersion:‘1.0.11'
});
2.第二步
//引入地图,这时地图已经可以在页面上显示了。
this.map = new AMap.Map('themap', {
resizeEnable: true,
center:[121.716284,29.888144],//这是地图的中心点
zoom: 18,//地图的层级
layers: [
new AMap.TileLayer,
this.imageLayer //这是我在地图上绘制自己的图层用的方法,可去掉。
]
});
//引入Marker,绘制点标记
this.marker = new AMap.Marker({
map: this.map,
position: this.firstArr,
icon: pic,//这里是我要的图片
});
//绘制轨迹
this.polyline = new AMap.Polyline({
map: this.map,
path: this.lineArr, // 这里是轨迹的坐标拼成的数组
showDir: true,
strokeColor: "#28F", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 6 //线宽
// strokeStyle: "solid" //线样式
});
var passedPolyline = new AMap.Polyline({
map: this.map,
strokeColor: "#AF5", //线颜色
//path: this.lineArr,
// strokeOpacity: 1, //线透明度
strokeWeight: 6 //线宽
// strokeStyle: "solid" //线样式
});
this.marker.on("moving", function(e) {
passedPolyline.setPath(e.passedPath);
});
this.map.setFitView();//自动调整到合适的位置
以上就是轨迹绘制的整个过程
扩展
要想在自己的地图上绘制图层,可以用上面用到的imageLayer
this.imageLayer = new AMap.ImageLayer({
url:tupian , //这里是自己的图片
bounds: new AMap.Bounds(
[121.71105271149695,29.885719370176783],//左下角的坐标
[121.72236765648086,29.891597442759533],//右上角的坐标
),
zooms: [15, 18] //这里是在15到18的范围内显示
});
这里要提示一下,放的图片一定要根据地图的方向。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
vue人员轨迹_在vue中高德地图引入和轨迹的绘制的实现相关推荐
- vue是否可以做行车轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
- 【高德地图进阶】--- 使用DistrictSearch 绘制城市版块
在[高德地图入门]-通过geoJson绘制 点,线,面一章中,我们学会了如何使用GeoJson绘制城市版块.今天我们使用高德自己的api来绘制城市版块 DistrictSearch DistrictS ...
- vue人员轨迹_Vue项目(vuecli3.0搭建)集成高德地图实现路线轨迹绘制
先看最后实现的效果图 高德地图api文档 使用 1.在index.html里面引入高德地图js文件 2.引入之后我们就直接可以在vue组件里面使用了 创建initMap方法,在mounted钩子函数中 ...
- VUE中使用高德地图.做个轨迹添加器,为路线规划做数据
准备工作 使用前准备 : 高德地图key 使用插件: vue-amap 1.npm安装vue-amap npm install vue-amap --save 2 在mai.js中引入 import ...
- vue使用高德地图aMap实现轨迹动画查询显示
vue使用高德地图搜索地址添加标记marker,定位,拖拽选址功能https://blog.csdn.net/SmartJunTao/article/details/123955679 实现效果: 需 ...
- vue项目中高德地图的注册及使用
1.创建应用 点击进入高德地图个人开发的注册:https://lbs.amap.com/dev/id/personal 然后可以登录支付宝进行认证. 注册完毕之后,点击右上角的控制台 点击右上角的创建 ...
- vue使用高德地图制作小车轨迹回放动画简单案例
首先在根目录public中的index.html引入高德地图 <script type="text/javascript" src="https://webapi. ...
- vue 高德地图 不同区域显示不同颜色_联测科技丨高德地图不仅仅是拿来导航的...
高德地图不仅仅当做一个导航工具,他还有许多不一样的用途. 隐藏功能一:制作高大上的PPT地图 高德地图强悍的功能,我们需要进入这个网站:https://lbs.amap.com,也就是高德开放平台. ...
- Vue项目引用高德地图实现车辆轨迹回放
一.引入高德地图jsApi 在项目入口index.html页面以cdn方式引入 <script src="https://webapi.amap.com/maps?v=1.4.15&a ...
最新文章
- python培训费用-Python培训费用得多少?
- linux下的打包与压缩
- 在什么情况下Java比C++快?
- iscroll.js 触屏手机web-kit浏览器滚动效果代码库
- Mapreduce和Yarn概念,参数优化,作用,原理,MapReduce计数器 Counter,MapReduce 多job串联之ControlledJob(来自学习资料)
- 使用golang的http模块构建redis读写查api
- js结合css3,使用JS和CSS3实现的旗帜飘扬动画
- 三层架构 android访问MSSQL数据库 程序 (服务器端)
- 两波形相位差的计算值_国际学科备考系列A-level物理:相位和相位差的数学解释及物理应用...
- error obtaining controller instance: failed to create NAT chain
- Airbnb是如何创造更好的邮件体验的
- 运行项目遇到:该网页无法正常运作,localhost将您重定向的次数过多时的解决方案
- Hisat2-Stringtie-DESeq2复现Transcript-level expression analysis of RNA-seq experiments with ...
- android头像设置
- itchat微信自动回复消息
- 手机通讯录误删怎么恢复
- PBR——概述、基于物理的材质
- 20210514面试题自我分类及总结(一)
- Bia布刷题日记 LC-1
- 第五讲 Virtual Box 安装(2)
热门文章
- windows缩放200模糊_1.8M超轻量目标检测模型NanoDet,比YOLO跑得快,上线两天Star量超200...
- 服务器不能自动备份软件,windows服务器自动备份上传软件+bat
- 从0开始利用宝塔linux面板+WordPress一键部署搭建个人的博客介绍
- 【Python教程】dict字典的使用方法
- Python格式化输出的三种方式
- python中使用for循环,while循环,一条命令打印99乘法表
- linux动态库文件.so为什么有多个版本号?(多个名字)(小版本升级)
- python 为什么元组中只包含一个元素时,需要在元素后面添加逗号?(消除歧义)
- 王道计算机考研 数据结构 (树与二叉树)
- Netty原理三:NioEventLoop如何处理客户端连接