Vue Baidu Map 简介

Vue Baidu Map是针对Vue的百度地图组件，可以快速使用百度地图组件、定位、搜索、标注点、线、面等图形，可以实现轨迹查看、轨迹回放等功能。

Vue Baidu Map 安装

Vue Baidu Map 安装包括2中方式：NPM和CDN，安装方式如下：

1、NPM

$ npm install vue-baidu-map --save

2、CDN

< script src=“https://unpkg.com/vue-baidu-map”></ script>

Vue Baidu Map 引用

import Vue from ‘vue’
import BaiduMap from ‘vue-baidu-map’

Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥详见 http://lbsyun.baidu.com/apiconsole/key */
ak: ‘YOUR_APP_KEY’
})
提示：上面代码可以放到公共JS里，比如uni-app项目的main.js里

BmlLushu 引用

具体vue页面里需要添加引入组件，如果要实现地图轨迹回放功能，需要引入地图组件的路书组件，如下：
import {BmlLushu} from ‘vue-baidu-map’
export default {
components: {
BmlLushu
},

BmlLushu 具体使用

<baidu-map class="map" :center="center" :zoom="zoom" style="height:100%" :scroll-wheel-zoom="true"><bm-polyline :path="polylinePath" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="3" :editing="false"></bm-polyline><bm-marker :icon="startIcon" :position="{lng: startMark.lng, lat: startMark.lat}"></bm-marker><bm-marker :icon="endIcon" :position="{lng: endMark.lng, lat: endMark.lat}"></bm-marker><bml-lushu@stop="stop":path="trackPath":icon="icon":play="play":speed="speed":autoView="autoView":infoWindow="infoWindow":content="content":rotation="rotation"></bml-lushu></baidu-map>

说明：首先先创建一个<baidu-map>组件，然后里面创建<bm-polyline>组件，<bm-polyline>组件是轨迹线路组件，可以将接口传过来的所有点连成一条线，<bm-marker >组件是标注点的组件，用来标注轨迹的起点和终点，用2个小图标展示。重点就是下面的<bml-lushu >组件，该组件就是用来实现轨迹的播放的组件，具体参数说明如下：

属性：

参数	说明	类型
path	组成轨迹的点的数组	Array[{lng:’’,lat:’’}]
icon	图标	String
play	是否继续运动	Boolean
speed	速度	Double
autoView	视野是否跟着一起移动	Boolean
infoWindow	消息框是否显示	Boolean
content	消息框内容	String
rotation	是否根据线路的方向车辆随着转向	Boolean

展示效果

图片:

Vue Baidu Map 实现Vue版本地图轨迹回放（App端）相关推荐

vue baidu map之获取选中点的经纬度
需求:在vue项目中通过点击按钮,弹出百度地图的弹框,用户选择地图上的点或者通过搜索关键字选点,点击确认关闭弹窗得到经纬度效果: vue baidu map api链接 : https://da ...
微信小程序map地图轨迹回放的问题
map地图轨迹回放报FaceTo的错误如果你的轨迹回放报出这个错误,那么你可能和我一样,是在轨迹回放还未结束的时候或者说是还没有到一个点停止的时候就更新了新的位置信息,想让地图重新的渲染并执行. 这 ...
uniapp地图轨迹回放
uniapp地图轨迹回放欢迎使用ay-contrail插件最近有需求为:在地图上展示一些点的轨迹,按时间先后顺序回放.已实现任意多点的轨迹回放,整理插件代码如下: 1.ay-contrail插件 ...
百度地图轨迹回放,自定义路书,边走边画线
转自:https://www.cnblogs.com/syj2016/p/5685294.html 百度地图轨迹回放,自定义路书,边走边画线在原有的百度路书的基础上,做了修改,使其能实现边走边画线的 ...
Android实现高德地图轨迹回放
Android实现高德地图轨迹回放写在前面准备官方文档解读创建应用: 地图api引入: 权限添加效果展示过程实现地图初始化定位显示标记点点平滑移动添加呼吸点写在结尾写在前面 ...
高德地图轨迹回放、路径规划以及计算面积（超详细！！）
主要涉及到高德地图的路径规划.区域规划以及轨迹回放功能. 一.基础设置:地图 //创建地图var map = new AMap.Map('map',{zoom:17,//视角级别//中心点坐标// p ...
高德地图轨迹回放功能
一.介绍在项目过程中,需要对自己设备产品输出的定位信息进行验证.通过路跑测试获取到了一组经纬度数据.这时需要验证这组数据是否是实际路跑测试的轨迹,就用到了高德地图的轨迹回放功能.下面将 ...
基于Vue.js制作的仿车轮驾考通APP端页面
背景:学习完Vue,老师要求期末作业以Vue技术做一个手机端或者PC端的前端小项目.期末临近,周围的同学有的仿微信APP端,有的仿QQAPP端.小萍去年考科目一用了车轮驾考通刷题,然后她最后决定基于V ...
android高德地图轨迹偏纠,GitHub - YangHaoyi/DrawTraceDemo: 高德地图轨迹回放带定位纠偏加彩虹渐变线...
DrawTraceDemo 高德地图轨迹回放带定位纠偏加彩虹渐变线由于高德自身持续定位存在偏移状况,故摒弃了高德自身的定位点,改用自定义marker点作为定位点加注轨迹纠偏函数,根据时间判定此次移 ...

Vue Baidu Map 实现Vue版本地图轨迹回放（App端）

Vue Baidu Map 地图轨迹回放