@[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 的配置与百度路书，结合项目后台的实例展示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。