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

阿新 • • 發佈：2021-07-20

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

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

移動端軌跡回放- 點選檢視

Pc端軌跡回放

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

先看看流程：

到高德、百度、騰訊地圖申請金鑰，專案中引入Api，此步驟省略，可自行百度～
初始化地圖
設定經緯度，渲染自定義Marker點
模擬或請求軌跡資料
使用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