微信小程式實現軌跡回放，微信原生小程式，基於uniapp的小程式？

王铁柱6發表於2024-12-08
微信小程式APP

微信小程式實現軌跡回放，無論是原生小程式還是基於uni-app的小程式，核心思路都是相似的，主要區別在於使用的API和部分語法。以下分別介紹兩種實現方式：

1. 微信原生小程式:

  • 資料準備: 軌跡資料通常是一個包含經緯度、時間等資訊的陣列，例如：
[
  { "latitude": 30.54811, "longitude": 114.37036, "timestamp": 1678886400000 },
  { "latitude": 30.54822, "longitude": 114.37047, "timestamp": 1678886460000 },
  // ... more data points
]

  • 地圖元件: 使用微信小程式內建的map元件。

  • 繪製軌跡: 使用polyline在地圖上繪製軌跡線。

<map id="myMap" longitude="{{longitude}}" latitude="{{latitude}}">
  <polyline points="{{polyline}}" color="#007AFF" width="6" arrow-line="true" />
</map>

Page({
  data: {
    longitude: 114.37036, // 中心經度
    latitude: 30.54811, // 中心緯度
    polyline: [],
  },
  onLoad: function(options) {
    // 獲取軌跡資料，例如從後端介面獲取
    this.getTrajectoryData().then(data => {
      this.setData({
        polyline: data,
      });
    });
  },
  getTrajectoryData: function() {
    // 模擬獲取軌跡資料
    return Promise.resolve([
      { "latitude": 30.54811, "longitude": 114.37036 },
      { "latitude": 30.54822, "longitude": 114.37047 },
      // ... more data points
    ]);
  },
});

  • 動態回放: 使用setInterval或requestAnimationFrame結合translateMarker方法實現標記點的移動，模擬軌跡回放。 也可以透過不斷更新polyline的points屬性，實現軌跡的動態繪製。

  • 標記點: 使用marker元件在地圖上顯示當前位置。

2. uni-app:

uni-app的實現思路與原生小程式類似，主要區別在於使用uni-app的API：

  • 地圖元件: 使用uni-map元件。

  • 繪製軌跡: uni-map的polyline用法與原生小程式基本一致。

  • 動態回放: 同樣可以使用setInterval或requestAnimationFrame，結合mapContext.translateMarker實現標記點移動。

  • 跨平臺相容: uni-app的優勢在於可以跨平臺編譯，需要注意不同平臺的API差異，做好相容處理。

關鍵程式碼示例 (uni-app):

<template>
  <view>
    <uni-map id="map" :longitude="longitude" :latitude="latitude">
      <uni-polyline :points="polyline" color="#007AFF" width="6" :arrow-line="true" />
      <uni-marker :id="1" :latitude="markerLatitude" :longitude="markerLongitude" />
    </uni-map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      longitude: 114.37036,
      latitude: 30.54811,
      polyline: [],
      markerLatitude: 30.54811,
      markerLongitude: 114.37036,
    };
  },
  mounted() {
    // 獲取軌跡資料
    this.getTrajectoryData().then(data => {
      this.polyline = data;
      // 開始回放
      this.startPlayback();
    });
  },
  methods: {
    getTrajectoryData() {
      // ... 獲取軌跡資料
    },
    startPlayback() {
      // ... 實現回放邏輯
    },
  },
};
</script>

無論哪種方式，實現軌跡回放的核心在於：

  1. 獲取軌跡資料： 可以從後端介面獲取，或者

相關文章