mapbox使用高德底图做自定义导航路线功能

• 我用的是uniapp，其他框架自己套用就行
• 主要是转换坐标系，不然在高德底图中位置会偏移
• gcj02towgs84是转换坐标系，使用的是coordtransform.js中的

	setDirections(geometry) {
				// #ifdef APP-PLUS
				let start_point = gcj02towgs84(this.itude.coordinate[0], this.itude.coordinate[1]);
				// #endif
				// #ifdef H5
				// 开发测试用
				let start_point = [116.379028, 39.865042];
				// #endif
				let end_point = gcj02towgs84(geometry.coordinates[0], geometry.coordinates[1]);

				console.log(geometry.coordinates)
				let mymap = new MapboxDirections({ // 使用的mapbox-gl-directions.js
					accessToken: 你的mapbox key,
					language: "zh-Hans", //语言，默认是英语en
				});

				let routeCoordinates = []
				mymap.on('route', e => {
					this.clearRoute() // 有路线则清除下先
					routeCoordinates = []
					console.log('Route Coordinates:', e.route);

					for (let i = 0; i < e.route[0].legs[0].steps.length; i++) {
						let item = e.route[0].legs[0].steps[i]
						let geometryCode = polyline.decode(item.geometry)

						for (let g = 0; g < geometryCode.length; g++) {
							geometryCode[g] = wgs84togcj02(geometryCode[g][1], geometryCode[g][
								0
							])
						}
						routeCoordinates = [...routeCoordinates, ...geometryCode]
					}
					const geojson = {
						type: 'Feature',
						properties: {},
						geometry: {
							"type": "LineString",
							coordinates: routeCoordinates
						}
					};

					this.map.addLayer({
						id: 'route',
						type: 'line',
						source: {
							type: 'geojson',
							data: geojson
						},
						layout: {
							'line-join': 'round',
							'line-cap': 'round'
						},
						paint: {
							'line-color': '#888',
							'line-width': 4
						}
					})

				});
				// this.map.addControl(mymap, 'top-left'); //添加控件  这个注释可以将默认路线样式去除
				mymap.setOrigin(start_point); //设置原点
				mymap.setDestination(end_point); //设置终点
			},