jp-xpgj-GA-file/src/components/Amap.vue

<template>
	<div class="box">
		<div id="container" style="width:100%; height:100%"></div>

		<loading :visible="isLoading"></loading>
	</div>
</template>

<script>
	import MapLoader from '$project/utils/AMap'
	import Loading from '$project/components/Loading.vue'
	export default {
		components: {
			Loading
		},
		data() {
			return {
				isLoading: false,
			}
		},
		mounted() {},
		props: {
			converStatus: {
				require: false,
				default: 0,
			}
		},
		created() {
			/* var script = document.createElement('script')
			script.type = 'text/javascript'
			script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=09abadb2e35fc61fd84042c518e9aebf' // 高德地图
			document.body.appendChild(script) */
		},
		methods: {
			init(pointArr) {
				this.isLoading = true;
				MapLoader().then(AMap => {
					/* let map = new AMap.Map('container', {
						center: [116.397428, 39.90923],
						resizeEnable: true,
						zoom: 10
					}) */
					var amapPointArr = pointArr;
					//console.log(pointArr)


					var marker, lineArr = amapPointArr;
					console.log(amapPointArr)

					map && map.destroy();

					//默认荆鹏软件园中心坐标
					var map = new AMap.Map("container", {
						resizeEnable: true,
						center: [112.276527, 30.306427],
						zoom: 17
					});

					var markArr = [];
					var _this = this;
					amapPointArr.forEach(function(item, index) {
						if (index == 0 || amapPointArr.length == 1) {
							var icon = require("$project/assets/img/map_0.png");
						} else if (index == amapPointArr.length - 1) {
							var icon = require("$project/assets/img/map_2.png");
						} else {
							var icon = require("$project/assets/img/map_1.png");
						}
						var marker=new AMap.Marker({
							map: map,
							position: lineArr[index],
							icon: icon,
							offset: new AMap.Pixel(-26, -13),
							autoRotation: true,
							extData: item
						});
						markArr.push(marker)

						AMap.event.addListener(marker, 'click', function(e) {
							var cur = JSON.parse(JSON.stringify(e.target.getExtData()));
							console.log(cur)
						});
					})
					map.add(markArr);

					// 绘制轨迹
					var polyline = new AMap.Polyline({
						map: map,
						path: lineArr,
						showDir: true,
						strokeColor: "#28F", //线颜色
						// strokeOpacity: 1,     //线透明度
						strokeWeight: 3, //线宽
						// strokeStyle: "solid"  //线样式
					});

					var passedPolyline = new AMap.Polyline({
						map: map,
						// path: lineArr,
						strokeColor: "#AF5", //线颜色
						// strokeOpacity: 1,     //线透明度
						strokeWeight: 6, //线宽
						// strokeStyle: "solid"  //线样式
					});

					/* marker.on('moving', function(e) {
						passedPolyline.setPath(e.passedPath);
					}); */

					map.setFitView();

					this.isLoading = false;

				}, e => {
					this.mui.toast('地图加载失败');
					console.log('地图加载失败', e)
				})
			},
		},
	}
</script>

<style>
</style>