uniapp使用高德地图线路规划

地图终于实现了想要的功能

准备

高德地图提供了线路规划的接口，但是由于uniapp使用的是小程序的SDK，有些东西就会无法使用
参考文档

SDK里面的东西都是小程序中的语法，比如wx.getLocation这样一来在uniapp中就会报错
为了解决这个问题，我把他的amap-wx.js改成了amap-uni.js
我已经放到了我的资源和百度云里,百度云提取码 mtm5

const key = '高德地图key';
const amapFile = require('/common/amap-uni.js'); //先引入这个sdk

getWay(point) {
	let that = this;
	var startPoi = that.longitude + ',' + that.latitude;
	var endPoi = point;
	//画路线
	that.getLine(startPoi, endPoi, function(res, data) {
		that.polyline.push(res);//返回的路线，添加到路线数组中
	});
	//画起始点
	that.getMarkers(startPoi, endPoi, function(res) {
		that.markers.push.apply(that.markers, res);//返回包括起点和终点marker的数组，将这个数组与markers数组合并
	});
},
getLine(start, end, result, fail){
	let that = this;
	var myAmapFun = new amapFile.AMapWX({
		key: key
	});

	myAmapFun.getWalkingRoute({//获取步行路线规划
	//需要其他方式的可以参考官方文档改success里的方法，逻辑差不多
	//官方文档https://lbs.amap.com/api/wx/reference/core
		origin: start,
		destination: end,
		success: function(data) {
			console.log(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++) {//将每一步的数据放到points数组中
					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])
						})
					}
				}
			}
			result({
				points: points,
				color: "#0898ef",
				width: 8
			},data)//返回data是为了添加路线详情的步骤，不需要可以去掉
		},
		fail: function(info) {
			fail(info)
		}
	})
},
getMarkers(startpoi, endpoi, success){
	let markers = [];

	//起点
	let start = {
		iconPath: "/static/imgs/start.png",//起点图片
		id: 0,
		longitude: startpoi.split(",")[0],
		latitude: startpoi.split(",")[1],
		width: 28,
		height: 33
	}
	markers.push(start)
	//终点
	let end = {
		iconPath: "/static/imgs/end.png",//重点图片
		id: 1,
		longitude: endpoi.split(",")[0],
		latitude: endpoi.split(",")[1],
		width: 28,
		height: 33,
		callout:{//终点的点击气泡
			content:"集合点",
			borderRadius:6,
			bgColor:"#ffffff",
			display:"BYCLICK",
			textAlign:"center"
		}
	}
	markers.push(end)
	
	success(markers);
}