一、开发准备

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].latitudethis.markers[0].longitude = arr[0].longitudethis.markers[1].latitude = arr[arr.length-1].latitudethis.markers[1].longitude = arr[arr.length-1].longitude// 改变中心点this.latitude = arr[Math.floor(arr.length/2)].latitudethis.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生成的地图轨迹就渲染完成了，有问题的小伙伴可以评论区告诉我哦~

uniapp使用高德地图微信小程序SDK生成地图轨迹相关推荐

使用高德地图微信小程序SDK开发案例-输入提示（附源码）
闲来无事写一篇使用高德地图的微信小程序SDK开发应用的实例. 接下来先看需求: 我们要做的是,根据用户输入的关键词,给出相应的提示信息,列表中显示地方的名称,地方的详细地址以及对应的经纬度坐标. 当然 ...
高德地图微信小程序SDK x.fail is not a function ‘x.fail‘ is undefined
报错情况一个旧小程序项目, 微信小程序报错监控到, 项目引用的高德小程序插件SDK报错: 开始嘀咕: 前面的SB, 为毛小程序路径规划功能要用高德SDK. 懒得换,懒得查业务,先去高德官网看下: h ...
uni-app使用wx-canvas实现微信小程序上显示地图map和坐标geo
源码 <template><view class="echart-box"><canvas class="ec-canvas" : ...
微信小程序地图插件系列（二）：微信小程序使用百度地图（不定期补充知识点）
前言当我们在使用一些地图相关软件的情况下,他会显示选择那种.一般都有高德地图,百度地图等.那么我们在微信小程序中也想使用这种功能需要怎么办呢? 本文地址链接微信小程序-百度地图SDK官方文档微信 ...
uniapp开发APP和微信小程序——使用高德实现定位
在uniapp官网中明确说了可以使用高德地图来实现APP和微信小程序的定位. 在dcloud社区里大佬已经给出了实现方法(链接:uni-app 中使用微信小程序第三方 SDK 及资源汇总 - DClo ...
微信小程序-路线规划,地图导航功能基于高德地图API
主要实现微信小程序中的地图路线规划和地图导航功能小程序二维码: 更新 2018年4月18日:新增限行限号查询. 2018年5月7日:新增快递查询,模板消息发送. 准备 1.在http://lbs.a ...
uniapp+Echarts微信小程序实现中国地图
uniapp+Echarts微信小程序实现中国地图在uni-app项目引用Echarts 使用Echarts 地图实现: 最终效果 **项目源码**地址:[https://github.com/wa ...
微信小程序控制硬件第14篇微信小程序腾讯地图控制 4G Cat.1模组，安信可CA-01加载定位显示当前位置。
文章目录一.前言通讯协议技术问题点二.4G模组业务逻辑上报基站信息三.微信小程序控制另外,不要把我的博客作为学习标准,我的只是笔记,难有疏忽之处,如果有,请指出来,也欢迎留言哈! 微信物 ...
在微信小程序中打开地图选择位置功能
在微信小程序中打开地图选择位置功能前言首先查看效果一.准备工作 1-1. **下载小程序地理定位** ,[qqmap-wx-jssdk.js](https://lbs.qq.com/miniPr ...

uniapp使用高德地图微信小程序SDK生成地图轨迹

一文看懂微信小程序生成地图轨迹