Vue地圖軌跡回放技術分享，包含：移動端小程序、Pc端

前言：本人自從入web前端坑后，基本都在交通行業摸爬滾打（潛水摸魚），對地圖的應用開發較多些，這首個文章，分享地圖相關功能；

廢話不多說，先看看效果圖。

 移動端 軌跡回放 - 點擊查看

 

 

Pc端 軌跡回放

 

其實相關地圖操作還有很多，但各家Api方法都基本大同小異，接下來分享：如何一步步制作出這個軌跡回放功能

先看看流程：

1. 到高德、百度、騰訊地圖申請密鑰，項目中引入Api，此步驟省略，可自行百度～
2. 初始化地圖
3. 設置經緯度，渲染自定義Marker點
4. 模擬或請求軌跡數據
5. 使用translateMarker方法，移動Marker點

小程序端代碼：

//創建地圖盒子
<map id='map' :latitude="latitude" :longitude="longitude" :markers="covers" :style="{ width: '100%', height: mapHeight + 'px' }":scale="13" :polyline="polyline"></map>

// 地圖標記點，展示靜態車輛Marker點及頂部車牌信息
covers: [{
　　id: 1, 　　width: 42, 　　height: 47, 　　rotate: 270, 　　latitude: 34.259428, 　　longitude: 108.947040, 　　iconPath: 'http://cdn.zhoukaiwen.com/car.png', 　　callout: { 　　　　content: "陝A·88888", // 車牌信息 　　　　display: "ALWAYS", 　　　　fontWeight: "bold", 　　　　color: "#5A7BEE", //文本顏色 　　　　fontSize: "12px", 　　　　bgColor: "#ffffff", //背景色 　　　　padding: 5, //文本邊緣留白 　　　　textAlign: "center", 　　}, 　　anchor: { 　　　　x: 0.5, 　　　　y: 0.5, 　　}, }]

// 軌跡坐標點數據
coordinate: [{
    latitude: 34.259428, longitude: 108.947040, problem: false, }, { latitude: 34.252918, longitude: 108.946963, problem: false, }, { latitude: 34.252408, longitude: 108.946240, problem: false, }]

// 生命周期onReady()時，創建map對象
this.map = uni.createMapContext('map');

//軌跡回放方法，執行此方法即可
_this.map.translateMarker({
    markerId: 1, autoRotate:true, destination: { longitude: datai.longitude, // 車輛即將移動到的下一個點的經度 latitude: datai.latitude, // 車輛即將移動到的下一個點的緯度  }, duration: 700, complete: function(){ _this.playIndex++; if(_this.playIndex < len){ _this.start(_this.playIndex, data); }else{ console.log('軌跡已播放'); uni.showToast({ title: '播放完成', duration: 1400, icon: 'none' }); } }, animationEnd: function() { // 軌跡回放完成  }, fail(e) { // 軌跡回放失敗  }, }); 

以上就是基於uniapp實現軌跡回放，支持小程序等應用。

 

Pc端需按照不同廠家地圖參考Api，基本流程一致。因項目不允許開放代碼，大家可以先看看下面鏈接查看移動端完整項目。

 

開源源碼鏈接：https://gitee.com/kevin_chou/front-end-pu-zi