小程序模板網(wǎng)

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

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

需求概述

根據(jù)導(dǎo)出的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.
    2. 
				

				

					GPX (GPS交換格式)是一種輕量級XML數(shù)據(jù)格式，用于在互聯(lián)網(wǎng)上的應(yīng)用程序和Web服務(wù)之間交換GPS數(shù)據(jù)(路徑、路由和跟蹤)。

				

					 

				

					預(yù)研思路

				

					是否能夠直接讀取GPX文件（數(shù)據(jù)）—— 否。  如何讀取XML文件（數(shù)據(jù)）—— 也不太方便，需要借助第三方庫。  搜索過程受到啟發(fā)，小程序多使用JSON格式數(shù)據(jù)，何不直接操作JSON —— Bingo！

				

					 

				

					解決方案

				

					GPX轉(zhuǎn)JSON

				

					在線XML轉(zhuǎn)JSON - BeJSON  為了方便后續(xù)綁定使用，轉(zhuǎn)換后批量將“lat”替換為“latitude”、“lon”替換為“longitude”。

				

					

				

					GPX（XML） 

				

					

				

					JSON

				

					 

				

					獲取JSON文件

				

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

				

					 

				

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

				

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

				

					

				

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

				

					 

				

					繪制路徑

				

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

				

					 

				

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

				

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

				

					真機運行

				

					

				

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

					
		

	




            


            


            

            

                

                    易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源
                    碼云倉庫:starfork
                

                

                    本文地址：http://22321a.com/wxmini/doc/course/24347.html 復(fù)制鏈接 
                    如需定制請聯(lián)系易優(yōu)客服咨詢：800182392 點擊咨詢 
                

            

          

          

        

      

      
    

  







  

    
  









  
  

    
    
    

    

     QQ在線咨詢