uniapp使用高德地图微信小程序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生成的地图轨迹就渲染完成了，有问题的小伙伴可以评论区告诉我哦~