一、開發準備

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生成的地圖軌跡就渲染完成了，有問題的小伙伴可以評論區告訴我哦~