muck_truck_app/components/mapNew/mapNew - 好用参考版.vue

<template>
	<view>
		<map id="test_map" ref="map1" style="width: 100%; height: 600px" :show-location="true"
			:longitude="map.longitude" :latitude="map.latitude" :markers="markers" :polyline="polyline"
			show-compass="ture" show-location="true" :controls="controls" @tap="tapMap">
		</map>
		<button @click="dingwei">定位到"北京西站"</button>
		<button @click="dingwei2">ref 定位到"北京西站"</button>
		<button @click="chooseLocation">选择地点</button>
		<button @click="getDriverLine">开始导航</button>
		<button @click="openNavigation">打开app</button>
		<button @click="openNavigation">规划路线</button>
	</view>
</template>



<script>
	export default {
		props: {
			getLocation: {
				type: Object,
				default: null,
			},
		},
		data() {
			return {
				mapContext: {},
				map: {
					longitude: "", //经度
					latitude: "", //纬度
				},
				form: {
					name: "",
					area: "",
					address: "",
					location: "",
				},
				runningRoute: "",
				polyline: [{
					// 每个点的经纬度
					points: [{
							longitude: 118.769025,
							latitude: 31.976056,
						},
						{
							longitude: 118.77464,
							latitude: 31.974362,
						},
						{
							longitude: 118.774039,
							latitude: 31.97631,
						},
					],
					// 颜色
					color: "#000",
					// 宽度
					width: 10,
					dottedLine: true,
					arrowLine: true,
					colorList: true,
				}, ],
				controls: [
					// {
					//   //在地图上显示控件，控件不随着地图移动
					//   id: 1, //控件id
					//   iconPath: "/static/c1.png", //显示的图标
					//   position: {
					//     //控件在地图的位置
					//     left: 15,
					//     top: 15,
					//     width: 50,
					//     height: 50,
					//   },
					// },
				],
				markers: [
					// {
					//   longitude: 118.769032,
					//   latitude: 31.975258,
					//   iconPath: "/static/c1.png",
					// },
				],
			};
		},
		created() {
			let _this = this;
			if (this.getLocation != null) {
				console.log("当前位置", this.getLocation);
				_this.map.longitude = this.getLocation.longitude;
				_this.map.latitude = this.getLocation.latitude;
				_this.getDriverLine();
				return;
			}
		},
		mounted() {
			this.mapContext = uni.createMapContext("test_map", this);
			//起点
			// this.addMarler();
			// 终点
			// this.addEndMarler();
		},
		methods: {
			// 导航 会打开导航菜单供用户选择，都是打开内置地图
			openNavigation() {
				//方法1
				let longitude = xxxxx;
				let latitude = xxxxxx;
				let name = '想要去的地方'
				let url = ""; // app url
				let webUrl = ""; // web url 用来为用户未安装导航软件时打开浏览器所使用url
				plus.nativeUI.actionSheet({
						//选择菜单
						title: "选择地图应用",
						cancel: "取消",
						buttons: [{
							title: "高德地图"
						}], // 可选的地图类型
					},
					(e) => {
						// 判断用户选择的地图
						switch (e.index) {
							//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
							case 1:
								// 安卓
								if (plus.os.name == "Android") {
									url =
										`androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								} else {
									url =
										`iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								}
								webUrl =
									`https://uri.amap.com/marker?position=${longitude},${latitude}&name=${name}&src=mypage&coordinate=gaode`;
								break;
						}
						// 如果选中
						if (url != "") {
							url = encodeURI(url);
							// 打开 app 导航
							plus.runtime.openURL(url, (err) => {
								// 失败回到
								// 如果失败则说明未安装 直接 打开网页版进行导航
								// 毕竟用户可能没有安装app但一定安装的有浏览器
								plus.runtime.openURL(webUrl);
							});
						}
					}
				);
				//方法2
				uni.openLocation({
					latitude: 31.975258,
					longitude: 118.769032,
					name: "想去的地方",
					success() {
						console.log("success");
					},
				});
			},
			//路线规划，调用高德地图的api实现规划路线的功能。
			getDriverLine() {
				const that = this;
				//这个key是在高德导航app上申请的web路线规划
				const key = "";
				//起点坐标
				const origin = "xxx,xxx";
				//给起点坐标一个图标
				this.startingPoint()
				//给终点坐标一个图标
				this.endPoint()
				//终点坐标
				const destination = "xxx,xxx";
				uni.request({
					url: `https://restapi.amap.com/v3/direction/driving?origin=${origin}&destination=${destination}&key=${key}`,
					success: (res) => {
						console.log(res);
						const data = res.data.route;
						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]),
									});
								}
							}
							console.log(data.paths[0].steps[0].instruction)
							//这个是我用来测试的，指的是开始导航之后的要走的第一步路
							that.runningRoute = data.paths[0].steps[0].instruction;
							console.log('行驶路线-----------', that.runningRoute)
						}
						//这个就是走的路，下面有几个属性在app上不支持
						that.polyline = [{
							points: points,
							color: "#0091ff",
							dottedLine: true,
							width: 15,
							arrowLine: true,
							colorList: true,
						}, ];
					},
					fail: function(res) {
						console.log("获取路线失败", res);
					},
				});
			},
		// 规划路线的时候给起点一个marker，
		startingPoint() {
			let point = [{
				id: 1,
				width: 40,
				height: 40,
				latitude: xxxx,
				longitude: xxxx,
				iconPath: "/static/qidian.png",
				anchor: {
					x: 0.5,
					y: 1,
				},
			}, ];
			this.markers = this.markers.concat(point);
		},
		// 规划路线的时候给终点一个marker，
		endPoint() {
			let point = [{
				id: 2,
				width: 40,
				height: 40,
				latitude: xxxx,
				longitude: xxxx,
				iconPath: "/static/zhongdian.png",
				anchor: {
					x: 0.5,
					y: 1,
				},
			}, ];
			this.markers = this.markers.concat(point);
		},
		daohang() {
			uni.openLocation({
				longitude: parseFloat(118.769025),
				latitude: parseFloat(31.976056),
				scale: 18,
				success: function() {
					console.log("success");
				},
			});
		},
		//点击之后打点的功能
		tapMap(e) {
			var that = this;
			var id = e.currentTarget.id;
			var maps = uni.createMapContext("test_map", this).$getAppMap();

			maps.onclick = function(point) {
				console.log(point);

				point.iconPath = "/static/c1.png";
				that.markers = that.markers.concat(point);

				uni.showToast({
					title: "添加成功",
					icon: "none",
				});
			};
		},
		//定位当前位置方法1
		dingwei() {
			this.mapContext.moveToLocation({
				//该固定坐标为高德地图拾取,位置:北京西站
				latitude: 39.894589,
				longitude: 116.32125,
				success: function(res) {
					console.log("此处无回调!!!本条信息未在控制台打印");
					console.log(res);
				},
			});
		},
		//定位当前位置方法2
		dingwei2() {
			console.log(this.$refs.map1);
			this.$refs.map1.moveToLocation({
					//该固定坐标为高德地图拾取,位置:北京西站
					latitude: 39.894589,
					longitude: 116.32125,
				},
				function(res) {
					console.log("此处无回调!!!本条信息未在控制台打印");
					console.log(res);
				}
			);
		},

		//自带选址（这个我没用到）
		chooseLocation() {
			uni.chooseLocation({
				success: (res) => {
					console.log(res);
					this.form.name = res.name;
					this.form.area = res.address;
					this.form.location = this.util.formatLocation(
						res.longitude,
						res.latitude
					);
					this.setMap(res);
				},
			});
		},
		setMap(res) {
			this.longitude = res.longitude;
			this.latitude = res.latitude;
			this.markers[0].longitude = res.longitude;
			this.markers[0].latitude = res.latitude;
		}
	}
	}
</script>

<style>

</style>