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 |
展示效果
圖檔:
備注:電腦端軌迹軌迹播放實作請聯系開發者。