1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
| // mMap.vue
<template>
<div class="m-map">
<div id="map-box"></div>
</div>
</template>
<script>
export default {
props: ['data'],
data() {
return {
map: {},
lineArr: [],
};
},
created() {
this.initMap()
},
methods: {
initMap() {
this.$nextTick(() => {
this.map = new AMap.Map('map-box', {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom: 14, //初始化地图层级
center: [116.397428, 39.90923], //初始化地图中心点
animateEnable: true// 地图平移过程中是否使用动画
});
if(this.lineArr.length) {
this.drawLine() //绘制路线
}
});
},
drawLine(){
AMap.convertFrom(this.lineArr, 'gps', (status, result) => {
if (result.info === 'ok') {
const paths = result.locations;
this.map.clearMap()
this.startMarker = new AMap.Marker({
map: this.map,
position: paths[0], //起点经纬度
icon: new AMap.Icon({
image: require('@/assets/img/icon/icon-start.png'),
size: new AMap.Size(120, 120), //图标所处区域大小
imageSize: new AMap.Size(120,120) //图标大小
}), //起点ico
offset: new AMap.Pixel(-60, -60),
autoRotation: true,
// angle:-90,
});
this.endMarker = new AMap.Marker({
map: this.map,
position: paths[paths.length-1], //终点经纬度
icon: new AMap.Icon({
image: require('@/assets/img/icon/icon-end.png'),
size: new AMap.Size(60, 60), //图标所处区域大小
imageSize: new AMap.Size(60,60) //图标大小
}), //终点ico
offset: new AMap.Pixel(-30, -30),
autoRotation: true,
});
// 绘制轨迹
var polyline = new AMap.Polyline({
map: this.map,
path: paths,
showDir: true,
strokeColor: '#28F', //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 6, //线宽
// strokeStyle: "solid" //线样式
});
this.map.add([this.startMarker, this.endMarker]);
this.map.setFitView(); //自适应缩放级别
}
})
}
},
watch: {
data: {
handler(newValue, oldValue) {
this.lineArr = [];
if(newValue.length) {
newValue.map((item, index) => {
if( item.longitude != null && item.latitude != null ) {
this.lineArr.push(new AMap.LngLat(item.longitude,item.latitude));
}
});
this.drawLine();
}
},
immediate: true
},
},
};
</script>
<style scoped lang ="scss">
@import '@/assets/scss/mixin.scss';
.m-map {
width: 100%;
height: 100vh;
#map-box {
width: 100%;
height: 100%;
}
}
</style>
|
