Vue+高德地图API的使用(POI搜索+多功能路径规划)下

接上章POI搜索

完成多功能路径规划

修改提交事件 submitForm()

submitForm(formName) {
	//判断出行工具
	var tools = this.ruleForm.TravelTools
	if (tools == 'AMap.Driving') {
		this.Driving()
	} else if (tools == 'AMap.Walking') {
		this.Walking()
	} else if (tools == 'AMap.Riding') {
		this.Riding()
	}
}

修改onRest事件

//地址点击
onRest(val) {
	this.flag = false
	if (this.addwho == 'startPlace') {
		this.ruleForm.startPlace = val.name //起点名字
		this.ruleForm.startPlaceLoat = val.location //起点坐标
		this.ruleForm.startVal = val
	} else if (this.addwho == 'endPlace') {
		this.ruleForm.endPlace = val.name //终点名字
		this.ruleForm.endPlaceLoat = val.location //终点坐标
		this.ruleForm.endVal = val
	}
	this.map.panTo(val.location); //地图移动到坐标位置
},

修改TravelRadio事件

//出行工具 绑定值变化时
TravelRadio(e) {
	if (e == 'AMap.Driving') {
		this.ruleForm.Policy = 'AMap.DrivingPolicy.LEAST_TIME'
	} else if (e == 'AMap.Riding') {
		this.ruleForm.Policy = 0
	}
	this.PolicyType = e
},

data里面添加

driving: null, //驾车路线规划
walking: null, //步行路线规划
riding: null, //保存骑行路线规划

//表单数据
ruleForm: {
	startVal: null, //起点详细信息
	endVal: null, //终点详细信息
},

methods中添加PolicyClear

//清除所有路线
PolicyClear(){
	//清除驾车路线
	if (this.driving) {
		this.driving.clear()
	}
	//清除步行路线
	if (this.walking) {
		this.walking.clear()
	}
	//清除骑行路线
	if (this.riding) {
		this.riding.clear()
	}
},

驾车路线规划

//驾车事件
Driving() {
	AMapLoader.load({
		plugins: ["AMap.Driving"] //地点搜索服务插件
	}).then((AMap) => {
		this.PolicyClear()//清除所有路线
		var pol = this.ruleForm.Policy
		var driv = null
		//判断出行策略
		if (pol == 'AMap.DrivingPolicy.LEAST_TIME') {
			driv = new AMap.Driving({
				map: this.map,
				policy: AMap.DrivingPolicy.LEAST_TIME,
			});
		} else if (pol == 'AMap.DrivingPolicy.LEAST_FEE') {
			driv = new AMap.Driving({
				map: this.map,
				policy: AMap.DrivingPolicy.LEAST_FEE,
			});
		} else if (pol == 'AMap.DrivingPolicy.LEAST_DISTANCE') {
			driv = new AMap.Driving({
				map: this.map,
				policy: AMap.DrivingPolicy.LEAST_DISTANCE,
			});
		} else if (pol == 'AMap.DrivingPolicy.REAL_TRAFFIC') {
			driv = new AMap.Driving({
				map: this.map,
				policy: AMap.DrivingPolicy.REAL_TRAFFIC,
			});
		}
		this.driving = driv
		var startLngLat = this.ruleForm.startVal.location
		var endLngLat = this.ruleForm.endVal.location
		//使用地点经纬度规划路线
		this.driving.search(startLngLat, endLngLat, (status, result) => {
			console.log("驾车路线规划status=", status);
			if (status === 'complete') {
				console.log('获取驾车数据成功：', result);
			} else {
				console.log('获取驾车数据失败：', result);
			}
		})
	})
},

驾车路线效果图：

步行路线规划

//步行事件
Walking() {
	AMapLoader.load({
		plugins: ["AMap.Walking"] //地点搜索服务插件
	}).then((AMap) => {
		this.PolicyClear()//清除所有路线
		this.walking = new AMap.Walking({
			map: this.map,
		});
		var startLngLat = this.ruleForm.startVal.location
		var endLngLat = this.ruleForm.endVal.location
		this.walking.search(startLngLat, endLngLat, (status, result) => {
			console.log("goView驾车路线规划status=", status);
			if (status === 'complete') {
				console.log('获取驾车数据成功：', result);
			} else {
				console.log('获取驾车数据失败：' + result);
			}
		})
	})
},

步行路径规划效果：

骑行路线规划

//骑行事件
Riding() {
	AMapLoader.load({
		plugins: ["AMap.Riding"] //地点搜索服务插件
	}).then((AMap) => {
		this.PolicyClear() //清除所有路线
		this.riding = new AMap.Riding({
			map: this.map,
			policy: this.ruleForm.Policy,
		});
		var startLngLat = this.ruleForm.startVal.location
		var endLngLat = this.ruleForm.endVal.location
		this.riding.search(startLngLat, endLngLat, (status, result) => {
			console.log("Riding骑行路线规划status=", status);
			if (status === 'complete') {
				console.log('获取骑行数据成功：', result);
			} else {
				console.log('获取骑行数据失败：' + result);
			}
		})
	})
},

骑行路径规划效果：