网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網

【小程序】地圖|繪制GPX軌跡

發布時間:2018-05-08 14:26 所屬欄目:小程序開發教程

需求概述

根據導出的GPX文件,在地圖上繪制其路徑軌跡。

GPX: the GPS Exchange Format

 

				
  1. 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數據展現到小程序示例

 

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

使用本地鏈接進行測試會報錯,需要將項目設置里勾選上“不校驗...”:【微信小程序】 微信小程序連接本地接口

本地測試沒問題后,將文件部署到外網環境,改下url就可以了。

 

繪制路徑

由于數據格式已經與小程序要求的一致了,直接將其賦給對應的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回調里直接使用this.setData會報錯:微信小程序中this指向作用域問題this.setData is not a function報錯。

真機運行

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



易優小程序(企業版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://www.xiuhaier.com/wxmini/doc/course/24347.html 復制鏈接 如需定制請聯系易優客服咨詢:800182392 點擊咨詢
QQ在線咨詢
AI智能客服 ×