uniapp使用高德地图微信小程序SDK生成地图轨迹
一文看懂微信小程序生成地图轨迹
- 一、开发准备
-
- 1、下载微信小程序SDK
- 2、高德控制台申请相关平台key
- 二、html页面展示地图标签
- 三、引入sdk及定义数据
- 四、相关方法（静态生成两个点之间的轨迹数据）
- 五、相关方法（后端返回的轨迹数据）
一、开发准备
1、下载微信小程序SDK
将微信小程序SDK下载到项目中就可以了，官网下载链接在下方显示
微信小程序SDK下载页面
2、高德控制台申请相关平台key
控制台
如果没有开发者账号的话，可以先去注册一个
二、html页面展示地图标签
<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生成的地图轨迹就渲染完成了，有问题的小伙伴可以评论区告诉我哦~