GPX（XML） 

JSON

獲取JSON文件

將轉(zhuǎn)換后的JSON文件部署到本地服務(wù)器，先進(jìn)行本地測(cè)試。  通過(guò)wx.request獲取數(shù)據(jù)：微信小程序通過(guò)api接口將json數(shù)據(jù)展現(xiàn)到小程序示例

1. wx.request({
2. url: '', // https接口路徑
3. header: { // 數(shù)據(jù)類型等
4. 'Content-Type': 'application/json'
5. },
6.  
7. success: function(res) {
8. //這里就是請(qǐng)求成功后，進(jìn)行一些函數(shù)操作
9. console.log(res.data)
10. }
11. })

使用本地鏈接進(jìn)行測(cè)試會(huì)報(bào)錯(cuò)，需要將項(xiàng)目設(shè)置里勾選上“不校驗(yàn)...”：【微信小程序】 微信小程序連接本地接口

本地測(cè)試沒(méi)問(wèn)題后，將文件部署到外網(wǎng)環(huán)境，改下url就可以了。

繪制路徑

由于數(shù)據(jù)格式已經(jīng)與小程序要求的一致了，直接將其賦給對(duì)應(yīng)的Key即可。

1. var trkPoints = res.data.gpx.trk.trkseg.trkpt;
2. _this.setData({
3. polyline: [{
4. points: trkPoints,
5. color: "#FF0000DD",
6. width: 2,
7. }]
8. }, function () {
9. console.log("Success");
10. })

需要注意的是，在wx.request回調(diào)里直接使用this.setData會(huì)報(bào)錯(cuò)：微信小程序中this指向作用域問(wèn)題this.setData is not a function報(bào)錯(cuò)。

真機(jī)運(yùn)行

至此，已基本滿足預(yù)研需求，后續(xù)開(kāi)發(fā)具體功能時(shí)會(huì)方便不少啦 ~ O(∩_∩)O ~  如果能夠顯示衛(wèi)星地圖就完美了，不過(guò)還沒(méi)找到好的解決方案，留作另一個(gè)問(wèn)題吧，TX不開(kāi)放也沒(méi)辦法了。