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);
}

---

补一下源代码

• amap-route-planning.js

//高德key
const key = '高德地图key';
//引入改版的sdk
const amapFile = require('./amap-uni.js'); 

function PlanningRoute(start, end, result, fail) {
	if(!check(start,end)){
		fail("请输入正确的start和end")
		return
	}
	let that = this;
	var myAmapFun = new amapFile.AMapWX({
		key: key
	});

	myAmapFun.getWalkingRoute({
		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++) {
					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])
						})
					}
				}
			}
			//这个返回结果就是对应的路线坐标,其他属性页面自己配置,请参照uniapp地图组件一章节
			//https://uniapp.dcloud.io/component/map
			result({
				points: points,
				color: "#0898ef",
				width: 8
			},data)
		},
		fail: function(info) {
			fail(info)
		}
	})
}
//标记标记点
function Makemarkers(startpoi, endpoi, success) {
	if(!check(startpoi,endpoi)) return
	let markers = [];
	let circle = [];

	//起点
	let start = {
		iconPath: "/static/start.png",
		id: 0,
		longitude: startpoi.split(",")[0],
		latitude: startpoi.split(",")[1],
		width: 28,
		height: 33
	}
	markers.push(start)
	//终点
	let end = {
		iconPath: "/static/end.png",
		id: 1,
		longitude: endpoi.split(",")[0],
		latitude: endpoi.split(",")[1],
		width: 28,
		height: 33,
		callout:{
			content:"开始导航",
			borderRadius:20,
			padding:5,
			bgColor:"#1f9ae4",
			color:"#fff",
			display:"BYCLICK",
			textAlign:"center"
		}
	}
	let endCircle = {
		latitude:endpoi.split(",")[1],
		longitude:endpoi.split(",")[0],
		fillColor:"#1f9ae41e",
		color:"#1f9ae400",
		strokeWidth:0,
		radius:50
	}
	markers.push(end)
	circle.push(endCircle)

	//统一风格为回调方式,也可以直接返回这个markers
	success(markers,circle);

}
function check(start,end){
	if(!start||!end) return false
}

module.exports = {
	line: PlanningRoute,
	markers: Makemarkers
}

• 使用线路规划的地方

import Amap from '@/common/amap/amap-route-planning.js';
···
	getWay(point){
		let that = this;
		var startPoi = that.longitude + ',' + that.latitude;
		var endPoi = point;
		//start和end的格式是     longitude, latitude
		Amap.line(startPoi, endPoi, function(res, data) {
			// 将返回的值添加到路线中    map的polyline属性值中
			that.polyline.push(res);
		});
		//添加起点和终点以及终点范围区域
		Amap.markers(startPoi, endPoi, function(endRes, circleRes) {
			that.markers.push.apply(that.markers, endRes);
			that.circle.push.apply(that.circle, circleRes);
		});
	}
···