vue项目中使用百度地图轨迹动画

在上篇博客中,介绍了如何在vue项目中集成百度地图,这篇博客主要是说如何在vue项目中使用轨迹动画

在项目开发过程中,比如你需要实时的观察一个人的行走路线,行走过程. 这个时候我们就需要在地图上使用轨迹动画了,根据不同的坐标点来设置人物或者车辆的行走轨迹.

具体代码如下:

<template><div class="patrol_area"><div id="allmap" style="height:600px;margin-top:5px;"></div></div>
</template><script>
import { mapGetters } from 'vuex'
export default {name: 'Dashboard',data(){return {path : [{'lng': 121.814224,'lat': 31.156484}, {'lng': 121.808547,'lat': 31.165754}, {'lng': 121.796186,'lat': 31.184848}, {'lng': 121.788353,'lat': 31.192015}, {'lng': 121.771752,'lat': 31.194734},{'lng':  121.74969,'lat': 31.189791},{'lng': 121.754217,'lat': 31.179658}, {'lng': 121.757523,'lat': 31.167794}],maps:'',pls:''}},mounted(){this.pathStart()},computed: {...mapGetters(['name'])},methods:{// 创建地图实例,并给设置移动路径pathStart(){// GL版命名空间为BMapGL// 按住鼠标右键，修改倾斜角和角度var map = new BMapGL.Map("allmap");    // 创建Map实例map.centerAndZoom(new BMapGL.Point(121.814224,31.156484), 17);  // 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放var point = [];for (var i = 0; i < this.path.length; i++) {point.push(new BMapGL.Point(this.path[i].lng, this.path[i].lat));}var pl = new BMapGL.Polyline(point);this.maps = mapthis.pls = plsetTimeout(this.start, 3000);map.setHeading(64.5);map.setTilt(73);},// 创建个轨迹动画对象，并配置参数start (){var trackAni = new BMapGLLib.TrackAnimation(this.maps, this.pls, {overallView: true,tilt: 30,duration: 20000,delay: 300});trackAni.start();}}
}
</script><style lang="scss" scoped>
.dashboard {&-container {margin: 30px;}&-text {font-size: 30px;line-height: 46px;}
}
</style>

因为百度api中的方法是是不适用于vue项目的,所以我将其进行了改动, maps和pls是用来存储map对象和pl对象的,因为在我们的start中也是要用到的. 刚开始,我是使用了参数进行传值,就是setTimeout(this.start(map,pl), 3000);.可是如果这样写,start方法则会立刻执行,那我们设置的setTimeout也就无用了.所以换了现在的方法.path是一个个位置点

这个就是地图中的轨迹动画,欢迎指正, 希望对您有所帮助,欢迎探讨

一直学习,一直踩坑中

vue项目中使用百度地图轨迹动画相关推荐

vue中使用百度地图轨迹动画
本篇文章主要讲述, 如何在vue项目中集成百度地图 1.首先找到你项目底下的index.html入口文件,这个根据不同的版本,所以存在的位置是不同的,具体如下: a.路径如下: 项目名/public/ ...
百度地图的使用方法，如何在Vue项目中使用百度地图
关于百度地图的解释百度地图又称LBS:LocationBussinessServer,是基于定义位置的商业服务,现在常用的地图有百度地图和高德地图居多官网入口 https://lbsyun.bai ...
vue项目中使用百度地图api完成自定义搜索功能（包含搜索详细地理位置）
需求描述: 在vue项目中,有时候,我们需要自定义百度地图的一些功能.譬如,现在的需求,就是需要自定义搜索内容和结果展示. 类似如下页面的功能: 首先在vue项目中,我们可以使用 vue-baidu- ...
vue项目中使用百度地图
安装首先在vue项目中,我们可以使用 vue-baidu-map 插件来替代直接引入百度地图js sdk. 官方文档 JavaScript API v2.0类参考 npm install --sav ...
笔记：vue项目中引用百度地图，地图空白现象
最近在项目中使用百度离线地图,可是一切都正常完成的情况下.页面中的地图区域居然是显示空白的: 检查了好久,发现是自己的全局样式造成的: 解决:将全局样式中img标签的max-width和max-hei ...
Vue项目中使用百度地图+mapv
1.安装依赖 npm install vue-baidu-map --save npm install mapv --save 2.main.js import BaiduMap from " ...
vue项目中通过百度地图API获取当前位置定位
1.申请自己的Ak(密钥) 百度地图开发平台登录后到控制台,然后创建应用,选择对应的配置创建成功后复制对应的AK就行(注意:创建过程中需要注意应用类型) 2. 创建一个map.js 里面写此代码需 ...
Vue项目中使用百度地图API
百度地图官方文档 1. 申请百度账号和ak 申请 2. 引用百度地图API文件 <script type="text/javascript" src="https: ...
前端项目中使用百度地图api，含实例
前言一.使用百度地图接口的步骤二.简单例子 1.第一个地图 2.控件 3.静态/动态添加点圈线面 4.文字标注.信息窗口 5. Web服务API-IP定位服务 6.Web服务API-地点检索服务 ...

vue项目中使用百度地图轨迹动画

vue项目中使用百度地图轨迹动画相关推荐

最新文章

热门文章

vue项目中 使用百度地图 轨迹动画

vue项目中 使用百度地图 轨迹动画相关推荐

最新文章

热门文章

vue项目中使用百度地图轨迹动画

vue项目中使用百度地图轨迹动画相关推荐