Vue中的高德軌跡回放
高德地圖實(shí)現(xiàn)軌跡回放的方式之一:使用高德地圖官方api中UI組件庫中的軌跡展示。
通過軌跡展示創(chuàng)建巡航器,實(shí)現(xiàn)軌跡回放,下面展示HTML以及Vue的高德軌跡回放,可以點(diǎn)擊下方鏈接直接進(jìn)入高德開發(fā)平臺(tái)!
HTML版高德軌跡回放
進(jìn)入頁面后點(diǎn)擊開發(fā)支持→地圖JS API
進(jìn)入地圖JS API后點(diǎn)擊示例中心,進(jìn)入界面后拉到底下找到軌跡回放
進(jìn)入后打開軌跡回放如下圖中已有示例,模擬小車的行駛軌跡。其模擬的軌跡為右側(cè)框圖的小車模擬位置點(diǎn), 將自己獲取的經(jīng)緯度點(diǎn)替代上面提到的小車模擬位置點(diǎn)即可驗(yàn)證自己設(shè)備輸出的GPS位置的準(zhǔn)確性。(注意:此頁面代碼為HTML格式)
Vue版高德軌跡回放
代碼
<template> <div> <div id="container"></div> <div class="input-card"> <h4>軌跡回放控制</h4> <div class="input-item"> <input type="button" class="btn" value="開始動(dòng)畫" id="start" @click="startAnimation()" /> <input type="button" class="btn" value="暫停動(dòng)畫" id="pause" @click="pauseAnimation()" /> </div> <div class="input-item"> <input type="button" class="btn" value="繼續(xù)動(dòng)畫" id="resume" @click="resumeAnimation()" /> <input type="button" class="btn" value="停止動(dòng)畫" id="stop" @click="stopAnimation()" /> </div> </div> </div> </template>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申請(qǐng)的key值"></script> <script> //請(qǐng)求路徑 //import { //playbacklist, //} from "@/api/obd/playback"; export default { mounted() { this.initMap(); }, beforeDestroy() { this.map && this.map.destroy(); }, data() { return { map: null, marker: null, lineArr: [ [116.478935, 39.997761], [116.478939, 39.997825], [116.478912, 39.998549], [116.478912, 39.998549], [116.478998, 39.998555], [116.478998, 39.998555], [116.479282, 39.99856], [116.479658, 39.998528], [116.480151, 39.998453], [116.480784, 39.998302], [116.480784, 39.998302], [116.481149, 39.998184], [116.481573, 39.997997], [116.481863, 39.997846], [116.482072, 39.997718], [116.482362, 39.997718], [116.483633, 39.998935], [116.48367, 39.998968], [116.484648, 39.999861] ] }; }, methods: { initMap() { this.map = new AMap.Map("container", { resizeEnable: true, center: [116.397428, 39.90923], zoom: 17 }); this.marker = new AMap.Marker({ map: this.map, position: [116.478935, 39.997761], icon: "https://webapi.amap.com/images/car.png", offset: new AMap.Pixel(-26, -15), autoRotation: true, angle: -90 }); // 繪制軌跡 let polyline = new AMap.Polyline({ map: this.map, path: this.lineArr, showDir: true, strokeColor: "#28F", //線顏色 // strokeOpacity: 1, //線透明度 strokeWeight: 6 //線寬 // strokeStyle: "solid" //線樣式 }); let passedPolyline = new AMap.Polyline({ map: this.map, // path: this.lineArr, strokeColor: "#AF5", //線顏色 // strokeOpacity: 1, //線透明度 strokeWeight: 6 //線寬 // strokeStyle: "solid" //線樣式 }); this.marker.on("moving", function (e) { passedPolyline.setPath(e.passedPath); }); this.map.setFitView(); }, startAnimation() { this.marker.moveAlong(this.lineArr, 200); }, pauseAnimation() { this.marker.pauseMove(); }, resumeAnimation() { this.marker.resumeMove(); }, stopAnimation() { this.marker.stopMove(); } } }; </script>
<style lang="less" scoped> // @import url('https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css'); #container { height: 1000px; width: 100%; } .input-card .btn { margin-right: 1.2rem; width: 9rem; } .input-card .btn:last-child { margin-right: 0; } .btn { display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid transparent; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; background-color: transparent; background-image: none; color: #25A5F7; border-color: #25A5F7; padding: .25rem .5rem; line-height: 1.5; border-radius: 1rem; -webkit-appearance: button; cursor:pointer; } .input-item { position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; width: 100%; height: 3rem; } .input-card { display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border-radius: .25rem; width: 22rem; border-width: 0; border-radius: 0.4rem; box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5); position: fixed; bottom: 1rem; right: 1rem; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 0.75rem 1.25rem; } </style>
常見問題
啟動(dòng)時(shí)會(huì)遇到Module not found: Error: Can’t resolve ‘less-loader’ in '文件位置’報(bào)錯(cuò)
原因是因?yàn)?less 、 less-loader模塊未安裝,但在中進(jìn)行使用
解決方法:npm install --save-dev less-loader less
直接安裝可能會(huì)存在版本太高問題的報(bào)錯(cuò),進(jìn)行npm run dev時(shí)項(xiàng)目無法啟動(dòng)
解決方法:npm install less-loader@5.0.0 -D 可在版本位置選擇合適的版本
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue離開當(dāng)前頁面觸發(fā)的函數(shù)代碼
這篇文章主要介紹了vue離開當(dāng)前頁面觸發(fā)的函數(shù)代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09vue.js表單驗(yàn)證插件(vee-validate)的使用教程詳解
這篇文章主要介紹了vue.js表單驗(yàn)證插件(vee-validate)的使用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05解決vue keep-alive 數(shù)據(jù)更新的問題
今天小編就為大家分享一篇解決vue keep-alive 數(shù)據(jù)更新的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue中v-cloak解決刷新或者加載出現(xiàn)閃爍問題(顯示變量)
這篇文章主要介紹了vue中v-cloak解決刷新或者加載出現(xiàn)閃爍問題(顯示變量) ,需要的朋友可以參考下2018-04-04VUE?axios每次請(qǐng)求添加時(shí)間戳問題
這篇文章主要介紹了VUE?axios每次請(qǐng)求添加時(shí)間戳問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01