需求概述

根據匯出的GPX檔案，在地圖上繪製其路徑軌跡。

GPX: the GPS Exchange Format

GPX (the GPS Exchange Format) is a light-weight XML data format for the interchange of GPS data (waypoints, routes, and tracks) between applications and Web services on the Internet.

GPX (GPS交換格式)是一種輕量級XML資料格式，用於在網際網路上的應用程式和Web服務之間交換GPS資料(路徑、路由和跟蹤)。

預研思路

是否能夠直接讀取GPX檔案（資料）—— 否。
如何讀取XML檔案（資料）—— 也不太方便，需要藉助第三方庫。
搜尋過程受到啟發，小程式多使用JSON格式資料，何不直接操作JSON —— Bingo！

解決方案

GPX轉JSON

線上XML轉JSON - BeJSON
為了方便後續繫結使用，轉換後批量將“lat”替換為“latitude”、“lon”替換為“longitude”。

GPX（XML）

JSON

獲取JSON檔案

將轉換後的JSON檔案部署到本地伺服器，先進行本地測試。
通過wx.request獲取資料：微信小程式通過api介面將json資料展現到小程式示例

wx.request({
url: '', // https介面路徑
header: { // 資料型別等
'Content-Type': 'application/json'
},

success: function(res) {
//這裡就是請求成功後，進行一些函式操作
console.log(res.data)
}
})
 

使用本地連結進行測試會報錯，需要將專案設定裡勾選上“不校驗...”：【微信小程式】 微信小程式連線本地介面

本地測試沒問題後，將檔案部署到外網環境，改下url就可以了。

繪製路徑

由於資料格式已經與小程式要求的一致了，直接將其賦給對應的Key即可。

var trkPoints = res.data.gpx.trk.trkseg.trkpt;
_this.setData({
 polyline: [{
 points: trkPoints,
 color: "#FF0000DD",
 width: 2,
}]
}, function () {
 console.log("Success"); 
})

需要注意的是，在wx.request回撥裡直接使用this.setData會報錯：微信小程式中this指向作用域問題this.setData is not a function報錯。

真機執行

至此，已基本滿足預研需求，後續開發具體功能時會方便不少啦 ~ O(∩_∩)O ~
如果能夠顯示衛星地圖就完美了，不過還沒找到好的解決方案，留作另一個問題吧，TX不開放也沒辦法了。