wuliu_sy/components/a-map-walking.vue

<template>
	<view id="amap" style="width: 100%; height: 100%" :points="points" :change:points="aMapRenderJs.receivePoints">
	</view>
</template>

<script>
	export default {
		props: {
			startPoint: {
				type: Array,
				default: () => [],
			},
			endPoint: {
				type: Array,
				default: () => [116.40717,39.90469],
			},
		},
		computed: {
			points() {
				// console.log(this.startPoint, this.endPoint)
				return {
					startPoint: this.startPoint,
					endPoint: this.endPoint
				};
			}
		},

	};
</script>


<script module="aMapRenderJs" lang="renderjs">
	import {
		Toast
	} from '.././libs/uniApi'

	const A_MAP_KEY = "4e96ffd5a5612a52c9caa25312ed9ace";
	const A_MAP_SECRET_KEY = "4817909f57e07c7694c056a62bb39124";

	export default {
		mounted() {
			this.loadMapApi().then(() => {
				this.initAmap()
			})

		},
		methods: {
			loadMapApi() {

				const A_MAP_KEY = "4e96ffd5a5612a52c9caa25312ed9ace";
				const A_MAP_SECRET_KEY = "4817909f57e07c7694c056a62bb39124";
				return new Promise((resolve, reject) => {
					if (typeof window.AMap === 'function') {
						resolve()
					} else {
						const script = document.createElement('script')
						script.src =
							`https://webapi.amap.com/maps?v=1.4.15&key=${A_MAP_KEY}&plugin=AMap.Driving&async=true&defer=true`

						script.onload = () => {
							window._AMapSecurityConfig = {
								securityJsCode: A_MAP_SECRET_KEY
							}
							resolve()
						}
						script.onerror = reject
						document.head.appendChild(script)
					}
				})
			},
			initAmap() {
				const map = new AMap.Map('amap', {
					center: this.startPoint,
					resizeEnable: true,
				});
				// 开始绘画路径
				const walking = new AMap.Driving({
					map: map,
				});

				this.map = map;
				this.walking = walking;
				this.makeWalking();
			},
			makeWalking() {
				if (!this.points.startPoint.length || !this.points.endPoint.length) {
					return;
				};

				this.walking.search(
					this.points.startPoint,
					this.points.endPoint,
					function(status, result) {
						if (status === 'complete') {
							console.log('绘制路线完成');
						} else {
							console.error('路线数据查询失败' + result);
							this.$emit('sbai','1')

						}
					}
				);
			},
			receivePoints(newVal) {
				console.log(`坐标更新：${JSON.stringify(newVal)}`);
				this.makeWalking();
			},
		},


	};
</script>