<template>
	<view >
		<map 
			:style="{height:+Height+'px',width:'100vh'}" 
			scale='15' 
			:latitude="latitude" 
			:longitude="longitude" 
			:markers="markers" 
			:polyline="polyline"
		>
		</map>
	</view>
</template>

<script>
	import amapFile from '@/js/amap-uni.js';//高德地图apka
	var Amap = new amapFile.AMapWX({key:'b84c9f51c744968cbf96de27249a2221'}); //高德地图小程序key
	export default {
		data() {
			return {
				Height:0,
				longitude: 115.923535,
				latitude: 28.687224,
				markers: [
					{
						id: 0,
						width: 23,
						height: 33,
						latitude: 28.687224,
						longitude: 115.923535, 
						iconPath: "/static/tab-my-current.png",
					}, 
					{ 
						id: 1,
						width: 20,
						height: 30,
						latitude: 28.687284,
						longitude: 115.909866,
						iconPath: "/static/jiesu.png",
					},
				],
				polyline: [], //路线
				destination:'',//用户的经纬度位置
			}
		},
		computed: {
			horse_lat() {
				return this.$store.state.horse_lat;
			},
		},
		watch:{
			horse_lat(val){
				this.markers[0].longitude=this.longitude=this.$store.state.horse_lng;
				this.markers[0].latitude=this.latitude=this.$store.state.horse_lat;
				this.getRidingRouteFun();
			}
		},
		onLoad(options){
			uni.getSystemInfo({
				success: res => {
					this.Height = res.windowHeight; //屏幕显示区域高度
				}
			});
			this.markers[0].longitude=this.longitude=this.$store.state.horse_lng;
			this.markers[0].latitude=this.latitude=this.$store.state.horse_lat;
			
			this.destination=options.userlng+','+options.userlat;
			this.markers[1].longitude=options.userlng;
			this.markers[1].latitude=options.userlat;
			this.getRidingRouteFun();
		},
		methods: {
			getRidingRouteFun(){
				console.log(this.longitude+','+this.latitude)
				Amap.getRidingRoute({
					origin:this.longitude+','+this.latitude,
					destination: this.destination,
					success: (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])
									})
								} 
							}
						}
						this.polyline=[{
							points: points,
							color: "#0091ff",
							width: 20
						}]
					}
				})
			},
		}
	}
</script>

<style>

</style>
