vue.js BMap 与BMapLib.lushu 的配置与百度路书，结合项目后台的实例展示

@[vue.js BMap 与BMapLib.lushu 的配置与百度路书，结合项目的实例展示]

上一章实现了百度轨迹的展现。今天写一个百度路书结合项目功能的实现。
(实例很全面，认真相互探讨学习)

步骤：

第一步：申请 ak, 很简单。
http://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey

第二步：配置。
public文件夹下面的index.html页面引入百度地图与百度路书的js

  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak&callback=init"></script><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script><script type="text/javascript" src="https://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js?s=1"></script>

第三步：引入页面。

// 页面中需要引入 BMap 与 BMapLib

<template><!--地图--><div style='width: 100%;height: 700px;'><el-select label="运输管理编号" v-model="inputForm.transportmanage.id" style="width: 300px;"  placeholder="请选择运输批次" @change="init2"><el-option v-for="(item,index) in transportmanageList" :key="index" :label="item.transportlot + '-' +item.productnum.productname" :value="item.id" /></el-select><el-input id='startKeyword'  v-model='startKeyword' clearable maxlength='20' show-word-limit style='width: 400px;'/><el-input id='endKeyword' v-model='endKeyword' clearable maxlength='20' show-word-limit style='width: 400px;'/><!--存放地图div --><div id="map_canvas"></div><div id="result"></div><!--按钮 --><el-button id="run" @click="run">开始</el-button><el-button id="stop" @click="stop">停止</el-button><el-button id="pause"  @click="pause">暂停</el-button><!-- <el-button id="hide" @click="hide">隐藏信息窗口</el-button><el-button id="show" @click="show">展示信息窗口</el-button> --></div>
</template><script>import BMap from 'BMap'import BMapLib from 'BMapLib'export default {name: 'index',data () {return {path : [{ //数组点'lng': 112.541993,'lat': 37.822504}, {'lng': 112.628662,'lat': 38.02281}, {'lng': 112.70708,'lat': 38.023748}, {'lng': 113.009629,'lat': 38.060038}, {'lng': 113.352889,'lat': 38.09286}, {'lng': 113.71081,'lat': 38.060209}, {'lng': 113.897227,'lat': 38.072481}, {'lng': 114.028882,'lat': 38.121267}, {'lng': 114.24771,'lat': 38.194384}, {'lng': 114.472825,'lat': 38.092136}, {'lng': 114.581917,'lat': 38.061173}],startPoint: { // 默认起点lng: '112.541993',lat: '37.822504'},endPoint: { // 默认终点lng: '114.581917',lat: '38.061173'},speed:1000, // 速度inputForm: {transportmanage:{id: '6f1e5712e4134ec7838738d0824f71bf', //默认选择项transportlot: '',startingpoint: '太原市万柏林区太原煤炭交易中心交易大楼',  // 出发地destination: '石家庄市长安区河钢集团石家庄钢铁有限责任公司' // 目的地}},startKeyword: '太原市万柏林区太原煤炭交易中心交易大楼',endKeyword: '石家庄市长安区河钢集团石家庄钢铁有限责任公司',loading: false,local: '',defaultContent: '001-钢筋',local2: '',transportmanageList: [], // 运输管理Lushu: '',map: '', // 路书marker: '', // 障碍物drv: '', // 实例化一个驾车导航用来生成路线pls: ''}},mounted () {this.init2()  // 路书初始化// this.init3()  // 路书初始化 （可添加轨迹点的路书实现）setTimeout(() => { // 时间等待this.run() // 启动}, 2000)},created () {this.getTransportmanageList()},methods: {// 获取运输管理数据列表getTransportmanageList () {this.loading = truethis.$http.get(`/transportmanage/bmTransportmanagement/queryTransportmanageList`).then(response => {this.transportmanageList = response.data.transportmanageList})this.loading = false},init2 (value) { // 路书var that = this//给div附上地图that.map = new BMap.Map('map_canvas')//给地图加上控件that.map.enableScrollWheelZoom()that.map.centerAndZoom(new BMap.Point(116.404, 39.915), 13); // 初始化地图,设置中心点坐标和地图级别function myFun(){var pp = that.local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果//this.startPoint = ppthat.startPoint.lng = pp.lngthat.startPoint.lat = pp.latthat.map.centerAndZoom(pp, 18);}function myFun2(){var pp = that.local2.getResults().getPoi(0).point;    //获取第一个智能搜索的结果//this.endPoint = ppthat.endPoint.lng = pp.lngthat.endPoint.lat = pp.latthat.map.centerAndZoom(pp, 18);that.map.addOverlay(new BMap.Marker(pp));    //添加标注}if(value){this.map.clearOverlays()    // 清除所有覆盖物this.marker.hide()this.$http.get(`/transportmanage/bmTransportmanagement/queryById?id=${value}`).then(({data}) => {that.startKeyword = data.bmTransportmanagement.startingpoint // 开始地点that.endKeyword = data.bmTransportmanagement.destination    // 结束地点that.defaultContent = data.bmTransportmanagement.transportlot + '-' + data.bmTransportmanagement.productnum.productnamethat.local = new BMap.LocalSearch(that.map, { // 智能搜索onSearchComplete: myFun})that.local.search(data.bmTransportmanagement.startingpoint)that.local2 = new BMap.LocalSearch(that.map, { //智能搜索onSearchComplete: myFun2})that.local2.search(data.bmTransportmanagement.destination)})}let searchComplete = function(res) {if (that.drv.getStatus() == BMAP_STATUS_SUCCESS) {var plan = res.getPlan(0)var arrPois = []for(var j = 0; j < plan.getNumRoutes(); j++){var route = plan.getRoute(j)arrPois= arrPois.concat(route.getPath())}that.marker = new BMap.Marker(arrPois[0],{//引入小车图标icon  : new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)})})//展示时小车样式let label = new BMap.Label("运输车",{offset:new BMap.Size(0,-30)})label.setStyle({border:"2px red rgb(204, 204, 204)",color: "rgb(2, 0, 0)",borderRadius:"10px",padding:"5px",background:"rgb(222, 255, 255)",});that.marker.setLabel(label);that.map.addOverlay(that.marker);that.map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'}))that.map.setViewport(arrPois)  // 调整到最佳视野BMapLib.LuShu.prototype._move = function(initPos,targetPos,effect) {let pointsArr = [initPos,targetPos];  //点数组let me = this,//当前的帧数currentCount = 0,//步长，米/秒timer = 10,step = this._opts.speed / (1000 / timer),//初始坐标init_pos = this._projection.lngLatToPoint(initPos),//获取结束点的(x,y)坐标target_pos = this._projection.lngLatToPoint(targetPos),//总的步长count = Math.round(me._getDistance(init_pos, target_pos) / step);//显示折线 syj201607191107// 画线操作 （画轨迹）this._map.addOverlay(new BMap.Polyline(pointsArr, {strokeColor : "red",  // 设置颜色strokeWeight : 5, // 宽度strokeOpacity : 0.5 // 透明度}))//如果小于1直接移动到下一点if (count < 1) {me._moveNext(++me.i)return}me._intervalFlag = setInterval(function() {//两点之间当前帧数大于总帧数的时候，则说明已经完成移动if (currentCount >= count) {clearInterval(me._intervalFlag)//移动的点已经超过总的长度if(me.i > me._path.length){return}//运行下一个点me._moveNext(++me.i)}else {currentCount++let x = effect(init_pos.x, target_pos.x, currentCount, count),y = effect(init_pos.y, target_pos.y, currentCount, count),pos = me._projection.pointToLngLat(new BMap.Pixel(x, y))//设置markerif(currentCount == 1){let proPos = nullif(me.i - 1 >= 0){proPos = me._path[me.i - 1]}if(me._opts.enableRotation == true){me.setRotation(proPos,initPos,targetPos)}if(me._opts.autoView){if(!me._map.getBounds().containsPoint(pos)){me._map.setCenter(pos)}}}//正在移动me._marker.setPosition(pos)//设置自定义overlay的位置me._setInfoWin(pos)}},timer)}// 创建路书实例that.Lushu = new BMapLib.LuShu(that.map,arrPois,{defaultContent: that.defaultContent, // 路书展示内容autoView:true, // 是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整// 图标设置icon  : new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}),speed: that.speed, // 速度enableRotation: true, // 是否设置marker随着道路的走向进行旋转landmarkPois:[// 停顿点   html 展示内容   pauseTime 停留时间 3s{lng:112.628662,lat:38.02281,html:'加油站',pauseTime:3}]})that.marker.addEventListener("click",function(){// that.marker.enableMassClear()   // 设置后可以隐藏改点的覆盖物that.marker.hide()that.Lushu.start()//this.map.clearOverlays()  // 清除所有覆盖物})}}setTimeout(() => { // 时间等待// 实例化一个驾车导航用来生成路线that.drv = new BMap.DrivingRoute(that.map, {onSearchComplete: searchComplete})var start = new BMap.Point(this.startPoint.lng, this.startPoint.lat);var end = new BMap.Point(this.endPoint.lng, this.endPoint.lat);that.drv.search(start, end)}, 1000)// // 判断是否有轨迹点// if (that.path.length == 0) {//   that.drv.search(start, end)// }else { // 添加了途经点//   that.drv.search(start, new BMap.Point(that.path[0].lng , that.path[0].lat) )//   for (let i = 0; i < that.path.length - 1; i++) {//     that.drv.search( new BMap.Point(that.path[i].lng , that.path[i].lat), new BMap.Point( that.path[i + 1].lng , that.path[i + 1].lat ))//   }//     that.drv.search(new BMap.Point(that.path[that.path.length - 1].lng , that.path[that.path.length - 1].lat), end)// }},init3 () { // 路书(可添加轨迹点) var that = this//给div附上地图that.map = new BMap.Map('map_canvas')//给地图加上控件that.map.enableScrollWheelZoom()that.map.centerAndZoom(new BMap.Point(116.404, 39.915), 13); // 初始化地图,设置中心点坐标和地图级别//坐标点集合let arrPois = []for (var i = 0; i < this.path.length; i++) {let poi = new BMap.Point(this.path[i].lng, this.path[i].lat)arrPois.push(poi)}this.map.setViewport(arrPois) // 调整到最佳视野this.marker=new BMap.Marker(arrPois[0],{//引入小车图标icon  : new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)})})//展示时小车样式let label = new BMap.Label("运输车",{offset:new BMap.Size(0,-30)})label.setStyle({border:"2px red rgb(204, 204, 204)",color: "rgb(2, 0, 0)",borderRadius:"10px",padding:"5px",background:"rgb(222, 255, 255)",})this.marker.setLabel(label)this.map.addOverlay(this.marker)BMapLib.LuShu.prototype._move = function(initPos,targetPos,effect) {let pointsArr=[initPos,targetPos]  //点数组let me = this,//当前的帧数currentCount = 0,//步长，米/秒timer = 10,step = this._opts.speed / (1000 / timer),//初始坐标init_pos = this._projection.lngLatToPoint(initPos),//获取结束点的(x,y)坐标target_pos = this._projection.lngLatToPoint(targetPos),//总的步长count = Math.round(me._getDistance(init_pos, target_pos) / step);//显示折线 syj201607191107// 画线操作 （画轨迹）this._map.addOverlay(new BMap.Polyline(pointsArr, {strokeColor : "red",  // 设置颜色strokeWeight : 5, // 宽度strokeOpacity : 0.5 // 透明度}))//如果小于1直接移动到下一点if (count < 1) {me._moveNext(++me.i)return}me._intervalFlag = setInterval(function() {//两点之间当前帧数大于总帧数的时候，则说明已经完成移动if (currentCount >= count) {clearInterval(me._intervalFlag)//移动的点已经超过总的长度if(me.i > me._path.length){return}//运行下一个点me._moveNext(++me.i)}else {currentCount++let x = effect(init_pos.x, target_pos.x, currentCount, count),y = effect(init_pos.y, target_pos.y, currentCount, count),pos = me._projection.pointToLngLat(new BMap.Pixel(x, y))//设置markerif(currentCount == 1){let proPos = nullif(me.i - 1 >= 0){proPos = me._path[me.i - 1]}if(me._opts.enableRotation == true){me.setRotation(proPos,initPos,targetPos)}if(me._opts.autoView){if(!me._map.getBounds().containsPoint(pos)){me._map.setCenter(pos)}}}//正在移动me._marker.setPosition(pos)//设置自定义overlay的位置me._setInfoWin(pos)}},timer)}// 创建路书实例this.Lushu = new BMapLib.LuShu(this.map,arrPois,{defaultContent: "运输车一", // 路书展示内容autoView:true, // 是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整// 图标设置icon  : new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}),speed: this.speed, // 速度enableRotation: true, // 是否设置marker随着道路的走向进行旋转landmarkPois:[// 停顿点   html 展示内容   pauseTime 停留时间 3s{lng:112.628662,lat:38.02281,html:'加油站',pauseTime:3}]})this.marker.addEventListener("click",function(){// this.marker.enableMassClear()   // 设置后可以隐藏改点的覆盖物this.marker.hide()this.Lushu.start()//this.map.clearOverlays()  // 清除所有覆盖物})},//绑定事件run () {// this.map.clearOverlays()    // 清除所有覆盖物// this.marker.enableMassClear() // 设置后可以隐藏改点的覆盖物this.marker.hide()this.Lushu.start()},stop () {this.Lushu.stop()},pause () {this.Lushu.pause()},hide () {this.Lushu.hideInfoWindow()},show () {this.Lushu.showInfoWindow()}}}
</script>
<style scoped>body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}#map_canvas{width:100%;height:700px;}#result {width:100%}#container {overflow: hidden;width: 100%;height: 100%;margin: 0;font-family: "微软雅黑";}ul li {list-style: none;}.drawing-panel {z-index: 999;position: fixed;bottom: 3.5rem;margin-left: 3rem;padding: 1rem 1rem;border-radius: .25rem;background-color: #fff;box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);}.btn {width: 90px;height: 30px;float: left;background-color: #fff;color: rgba(27, 142, 236, 1);font-size: 14px;border:1px solid rgba(27, 142, 236, 1);border-radius: 5px;margin: 0 5px;text-align: center;line-height: 30px;}.btn:hover {color: #fff;}
</style>

效果展示

vue.js BMap 与BMapLib.lushu 的配置与百度路书，结合项目后台的实例展示相关推荐

基于vue的响应式ui框架_基于Vue.js的响应式和可配置UI框架
基于vue的响应式ui框架 Framevuerk (Framevuerk) Fast, Responsive, Multi Language, Both Direction Support and C ...
Vue.js+Mysq+java+springboot+商品推荐算法实现商品推荐网站+商品管理系统后台
面对海量的商品信息如何实现针对不同用户维度开展个性化商品推荐,实现用户线上选购商品,下订单,支付,物流配送等?本次毕设程序基于前后端分离开发模式,搭建系统网络商品推荐系统前台与系统后台商品管理系统,通 ...
在2019年的Vue.js和ReactJS之间进行选择：什么最适合您的项目？
该文章最初发表在 Codica Blog上 . 如今,每个公司都致力于在短时间内创建高质量的Web解决方案. 为了付诸实践,开发人员社区可以从许多JavaScript库和框架中进行选择,并通过辩论找到 ...
vue.js毕业设计，基于vue.js前后端分离教室预约系统设计与实现（H5移动项目）
功能模块 [后台管理功能模块] 系统设置:设置关于我们.联系我们.加入我们.法律声明广告管理:设置小程序首页轮播图广告和链接留言列表:所有用户留言信息列表,支持删除会员列表:查看所有注册会员信息 ...
百度地图路书(BMapLib.LuShu)------在vue项目中使用原生实现在线和离线地图
前几天vue项目中需要使用百度地图的路数功能制作历史轨迹,为了离线时也可以正常计算路程等,所以这里选择使用原生离线去实现路书这里放出百度的官方示例:地图JS API示例 | 百度地图开放平台我先用 ...
关于vue.js 编程导航的使用：实现路由配置和跳转页面
本文主要讲述:通过vue.js 编程导航,实现路由配置和跳转页面的功能! 基础篇,仅作为简单演示. 总结不能保证用户一定会点击某些按钮并且当前操作,除了路由跳转以外,还会有一些别的附加操作(比如执 ...
vue.js 接收url参数
转载自 vue.js 接收url参数 1) 路由配置传参方式在配置路由时例如 "/firewall/authorize/:uid/:uname/:token" 页面url为 ...
用Vue.js开发微信小程序：开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
vue.js 编程导航，如何传递参数？
本文主要讲述:关于vue.js 编程导航,如何传递参数? 本文主要讲述:通过vue.js 编程导航,实现路由配置和跳转页面的功能! 基础篇,仅作为简单演示. 总结不能保证用户一定会点击某些按钮并且 ...

vue.js BMap 与BMapLib.lushu 的配置与百度路书，结合项目后台的实例展示

步骤：

效果展示

vue.js BMap 与BMapLib.lushu 的配置与百度路书，结合项目后台的实例展示相关推荐

最新文章

热门文章