Vue Baidu Map 地圖軌跡回放

• Vue Baidu Map 簡介
• Vue Baidu Map 安裝
• • 1、NPM
  • 2、CDN
• Vue Baidu Map 引用
• BmlLushu 引用
• BmlLushu 具體使用
• 展示效果

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端）的全部內容，希望文章能夠幫你解決所遇到的問題。

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