muck_truck_app/components/mapImg/mapImg.vue

<template>
		<image :src="getImg()" style="width: 100%;height: 100%;border-radius: 15rpx;"></image>
</template>

<script>
		import config from '@/config'

	export default {
		props:{
			startPoint:{
				type:String,
				default:'',
			},
			endPoint:{
				type:String,
				default:'',
			},
			mtRoutePointList:{
				type:Array,
				default:()=>{
					return []
				},
			},
			pathData:{
				type:String,
				default:'',
			}
		},
		data() {
			return {}
		},
		methods: {
			mercatorToWGS84(data){
				 let list=data.split(',');
				 let lonlat={lng:list[1],lat:list[0]};
			    const coord = {
					lat:0,
			    	lng:0
				};
			    const lat = lonlat.lat/20037508.34*180;
			    let lng = lonlat.lng/20037508.34*180;
			    lng = 180/Math.PI*(2*Math.atan(Math.exp(lng*Math.PI/180))-Math.PI/2);
			    coord.lat = lat;
			    coord.lng = lng;
			    return coord.lat+','+coord.lng
			},
			 getImg() {
				let key = config.key;
				if(this.mtRoutePointList.length===0)
				{
					return  'https://restapi.amap.com/v3/staticmap?location=126.04684,42.68497&zoom=6&key=' + key
				}
				// let starUrl = 'http://139.215.216.44:9010//fileupload/2022/09/27/star_20220927151629A097.png';
				// let endUrl = 'http://139.215.216.44:9010//fileupload/2022/09/27/end_20220927151745A098.png';
				let starUrl = 'http://139.215.216.44:9010//fileupload/2022/10/28/star_20221028160708A049.png';
				let endUrl = 'http://139.215.216.44:9010//fileupload/2022/10/28/end_20221028160807A050.png';
				let starMarkers = this.mercatorToWGS84(this.startPoint);
				let endMarkers = this.mercatorToWGS84(this.endPoint);
				console.log(starMarkers,'<-------------旧版起始点')
				console.log(endMarkers,'<------------旧版结束点')
				let weight = '2'
				let color = '0x6495ED'
				let transparency = '0.2'
				let fillcolor = '0x6495ED'
				let fillTransparency = '0.4'
				let path =this.mtRoutePointList.map(item=>this.mercatorToWGS84(item.pointCoordinate)).join(';')
				let paths=weight + ',' + color + ',' + transparency + ',' + fillcolor + ',' + fillTransparency + ':' + path ;
					if(this.pathData)
					{
						let data=this.pathData+';';
							paths+='|'+'10' + ',' + '0xFF0000' + ',' + '' + ',' + '' + ',' +'' + ':' +data
					
					}else{
						let data=this.pathData+';';
							paths+='|'+'10' + ',' + '0x76EE00' + ',' + '' + ',' + '' + ',' +'' + ':' +starMarkers+';'+endMarkers
					}
					console.log(this.pathData,'this.pathData');
				return 'https://restapi.amap.com/v3/staticmap?size=335*256&scale=2&markers=-1,' + starUrl +
					',0:' + starMarkers + '|-1,' + endUrl +
					',0:' + endMarkers + '&paths=' + paths + '&key=' + key
				 // return 'https://restapi.amap.com/v3/staticmap?size=116*85&scale=2&markers=-1,' + starUrl +',0:' + starMarkers + '|-1,' + endUrl +',0:' + endMarkers + '&paths=' + paths + '&key=' + key
				 // return 'https://restapi.amap.com/v3/staticmap?size=710*500&markers=-1,'+start+',0:'+A+'|-1,'+end+',0:'+B+'&paths=10,0x3662EC,1,,:'+points.join(';')+'&key='+this.GAODE_KEY;
				// return 'https://restapi.amap.com/v3/staticmap?scale=2&markers=large,0xFF0000,起:' + starMarkers +
				// 	'|large,0xFF0000,终:' + endMarkers + '&paths=' + paths + '&key=' + key
			},
			goMap(){
				console.log('去地图展示页');
			}
		},
	}
</script>


<style>
</style>