muck_truck_app/components/mapImg2/mapImg2.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: '125.324652,43.877198',
			},
			endPoint: {
				type: String,
				default: '125.325385,43.879278',
			},
			mtRoutePointList: {
				type: Array,
				default: () => {
					return [
						'116.477462800,39.994629400','116.475796400,39.999226200','116.486139200,40.002975600','116.487805600,39.998378800'
					]
				},
			},
			pathData: {
				type: String,
				// default:''
				default: '125.324652,43.877198;125.32462532533114,43.87730358488015;125.324496,43.877003;125.324649,43.876538;125.325385,43.879278',
			}
		},
		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/12/start_20221012172044A003.png';
				let endUrl = 'http://139.215.216.44:9010//fileupload/2022/10/12/end_20221012172112A004.png';
				let starMarkers = this.startPoint;
				let endMarkers = this.endPoint;
				let weight = '10'
				let color = '0x6495ED'
				let transparency = '0.2'
				let fillcolor = '0x6495ED'
				let fillTransparency = '0.4'
				let path = this.mtRoutePointList.join(';')
				let paths = weight + ',' + color + ',' + '' + ',' + '' + ',' + '' + ':' +
					'125.324652,43.877198;125.32462532533114,43.87730358488015;125.324496,43.877003;125.324649,43.876538;125.325385,43.879278';
				// if (this.pathData) {
				// 	let data = this.pathData + ';';
				// 	paths += '|' + '10' + ',' + color + ',' + '' + ',' + '' + ',' + '' + ':' + starMarkers + ';' + data +
				// 		endMarkers

				// }
				//计算中心点
				
				this.latitude = eval('43.877198' + '+' + '43.879278') / 2
				this.longitude = eval('125.324652' + '+' +'125.325385') / 2
				// 335/256
				let lcation=this.longitude+','+this.latitude;
				// let url='https://restapi.amap.com/v3/staticmap?size=335*256&location='+lcation+'&zoom=15&scale=2&markers=-1,' + starUrl +
				// 	',0:' + starMarkers + '|-1,' + endUrl +
				// 	',0:' + endMarkers +'&paths='+paths + '&key=' + key;
				let url='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 url;
			},
			goMap() {
				console.log('去地图展示页');
			}
		},
	}
</script>


<style>
</style>