uniapp使用高德地圖微信小程式SDK生成地圖軌迹

一文看懂微信小程式生成地圖軌迹

• 一、開發準備
• • 1、下載下傳微信小程式SDK
  • 2、高德控制台申請相關平台key
• 二、html頁面展示地圖示簽
• 三、引入sdk及定義資料
• 四、相關方法（靜态生成兩個點之間的軌迹資料）
• 五、相關方法（後端傳回的軌迹資料）

一、開發準備

1、下載下傳微信小程式SDK

将微信小程式SDK下載下傳到項目中就可以了，官網下載下傳連結在下方顯示

微信小程式SDK下載下傳頁面

2、高德控制台申請相關平台key

控制台

如果沒有開發者賬号的話，可以先去注冊一個

二、html頁面展示地圖示簽

<!-- latitude緯度  longitude經度  scale縮放等級  markers圖示資料  polyline地圖軌迹資料-->
<view>
	<map style="width: 750rpx; height: 100vh;" :latitude="latitude" 
		:longitude="longitude" scale="12" :markers="markers" :polyline="polyline">
	</map>
</view>
           

三、引入sdk及定義資料

// 引入微信小程式sdk
import amap from '@/gaodemap_sdk/amap-wx.js'

// 資料定義
// 地圖執行個體
amapPlugin:null,
// 小程式高德地圖key
key:'xxxxxxxxxxxxxxx',
// 圖示點資料
markers: [{
  iconPath: "/static/imgs/location.png",
  id: 0,
  latitude: 39.989643,
  longitude: 116.481028,
  width: 23,
  height: 33
},{
  iconPath: "/static/imgs/location.png",
  id: 0,
  latitude:39.90816,
  longitude: 116.434446,
  width: 24,
  height: 34
}],
// 中心點
latitude: 39.954125,
longitude: 116.45664,	
// 地圖軌迹資料
polyline:[],	
           

四、相關方法（靜态生成兩個點之間的軌迹資料）

擷取到的地圖軌迹資料也是一個點一個點的，這些點形成了一條軌迹

onLoad(options) {
	this.amapPlugin = new amap.AMapWX({
		key:this.key
	})
	var that = this
	// 靜态死資料
	this.amapPlugin.getDrivingRoute({
      origin: '116.481028,39.989643',
      destination: '116.434446,39.90816',
      success: function(data){
        var points = [];
        // 通過一個點一個點生成地圖軌迹資料
        if(data.paths && data.paths[0] && data.paths[0].steps){
          var steps = data.paths[0].steps;
          for(var i = 0; i < steps.length; i++){
            var poLen = steps[i].polyline.split(';');
            for(var j = 0;j < poLen.length; j++){
              points.push({
                longitude: parseFloat(poLen[j].split(',')[0]),
                latitude: parseFloat(poLen[j].split(',')[1])
              })
            } 
          }
        }
        that.polyline: [{
            points: points,   //地圖軌迹資料
            color: "#0091ff",   //軌迹顔色
            width: 6   //線條寬度
          }]
      },
      fail: function(info){

      }
    })
},
           

五、相關方法（後端傳回的軌迹資料）

onLoad(options) {
	this.amapPlugin = new amap.AMapWX({
		key:this.key
	})
	this.getTrackData()
}
           

擷取地圖軌迹資料，需要傳遞的資料看背景要求

// 擷取軌迹資料
async getTrackData(){
	const { data:res } = await this.$myHttp({
		url:'device/locator/historicalTrack',
		data:{
			locator_code:'xxxxxxxxxxxxxx',  //裝置id
		}
	})
	if(res.code == 200){
		// 建立一個空數組用于存放地圖軌迹資料
		let arr = []
		res.data.map((item,index)=>{
			arr.push({
				longitude:item.baiduLng,
				latitude:item.baiduLat
			})
		})
		arr.map((item)=>{
			item = this.bd_decrypt(item.longitude,item.latitude)
		})
		this.polyline = [{
			points: arr,
			color: "#0091ff",   //軌迹顔色
			width: 6   // 軌迹線條的寬度
		}]
		// 改變圖示坐标
		this.markers[0].latitude = arr[0].latitude
		this.markers[0].longitude = arr[0].longitude
		this.markers[1].latitude = arr[arr.length-1].latitude
		this.markers[1].longitude = arr[arr.length-1].longitude
		// 改變中心點
		this.latitude = arr[Math.floor(arr.length/2)].latitude
		this.longitude = arr[Math.floor(arr.length/2)].longitudex
	}else{
		uni.showToast({
			title:"擷取運作軌迹失敗",
			icon:"none",
			duration:1000
		})
	}
}
           

中間所用到的bd_decrypt方法是百度坐标轉高德，因為背景的資料是百度坐标系的，如果資料是高德坐标奚的就可以不用轉了。

//百度坐标轉高德（傳入經度、緯度）
bd_decrypt:function(bd_lng, bd_lat) {
    var X_PI = Math.PI * 3000.0 / 180.0;
    var x = bd_lng - 0.0065;
    var y = bd_lat - 0.006;
    var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
    var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
    var gg_lng = z * Math.cos(theta);
    var gg_lat = z * Math.sin(theta);
    return {longitude: gg_lng, latitude: gg_lat}
},
           

這樣，通過微信小程式sdk生成的地圖軌迹就渲染完成了，有問題的小夥伴可以評論區告訴我哦~