班车路线地图展示
# 班车路线地图展示
# 说明
- 当刚来的时候就遇到这个问题,因为对单位所在区域地理不熟悉,给出的班车停靠点也没什么概念,对于比较合适的居住地点就比较模糊。当时就找了最近的站点然后住了下来。当时的一个操作就是按照停靠点,去高德地图上搜索,看附近小区情况,是比较麻烦的,第一次也就没深究。 结果最近要换地方住,又遇到这个问题,我有这个问题,那么其他坐班车的人,或者特指有这样需求的新员工,如果能直观看到班车点在地图上显示,应该会方便点。
- 第二个问题:当前给出的是停靠点名称列表,如果是以坐标点显示出来,方便乘车人找到(尤其是第一次坐车的人)
- 第三个问题:将班车路线显示,将班车更好的为员工服务。举个例子:有一次要去莲花新村,我坐车到钟南街(我一直在这边上下车),然后打车去莲花新村。到了莲花新村之后,正好遇到坐另一辆班车的同事。
# 技术栈
vue3 + vue-amap# 实现
# 1.配置vue-amap (opens new window)
vue3配置vue-amap参考解决方案:@vuemap/vue-amap vue3 版本正式发布 (opens new window)
【注:】配置结束之后,运行项目,提示
Can't import the named export ...... from non EcmaScript
,参考地址https://blog.csdn.net/qq_45029735/article/details/121562640 (opens new window)配置vue.config.js解决
# 2.功能
思路:
- 路线用折线连接表示
- 终点用公司表示,起始点用"起点"图标显示,停靠点用"途径"图标表示,除终点外停靠点标签显示停靠点名称与出发时间
- 地图中心以公司位置为中心,地图初始缩放大小调整适中
效果如下所示:
# 3.获取坐标点
思路:
- 通过高德地图坐标拾取器 (opens new window)
- 通过
高德地图开放平台>控制台>GeoHub>我的数据集
中创建,参考(资料)[https://www.cnblogs.com/zxhao/p/zhang_xin_hao.html]- 页面实现选取的功能
目前选择思路1最简单的方式,包括正式数据的维护
# 4.编写页面
<template>
<div class="app-container" style="width:100%;height:100%;">
<div class="amap-wrapper">
<el-amap class="amap-box" :vid="'amap-vue'" :center="center" :zoom="zoom">
<el-amap-marker :position="companyMarker.position" :content="companyMarker.content" ></el-amap-marker>
<el-amap-marker :position="line1StartMarker.position" :label="line1StartMarker.label" :icon='line1StartMarker.icon'></el-amap-marker>
<el-amap-marker :key="index" v-for="(item,index) in line1Postions" :position="item.position" :label="item.label" :icon='item.icon'></el-amap-marker>
<el-amap-polyline :path="line1" outlineColor='#fff000' strokeWeight="8"></el-amap-polyline>
</el-amap>
</div>
</div>
</template>
<script>
export default {
name: "VehicleRoute",
data() {
return {
center:[120.815874,31.337132],
zoom:12,
companyMarker:{
position:[120.815874,31.337132],
content:'<div class="company-marker">公司</div>'
},
routeEndMarket:{
position:[120.815874,31.337132],
icon:require('@/assets/end.png')
},
line1StartMarker:{
label:{content:'xxxxxxxx',offset:[-35,-30]},
position:[120.744114,31.31394],
icon:require('@/assets/start.png')
},
line1Postions:[
{
label:{content:'钟南街(08:04)',offset:[-35,-30]},
position:[120.756292,31.326635],
icon:require('@/assets/mid.png')
},
{
label:{content:'太阳城(08:10)',offset:[-35,-30]},
position:[120.764644,31.329581],
icon:require('@/assets/mid.png')
}
],
line1:[
[120.744114,31.31394],
[120.748321,31.314221],
[120.748255,31.317422],
[120.748233,31.320585],
[120.756296,31.321352],
[120.756208,31.326536],
[120.756209,31.326524],
[120.760003,31.326667],
[120.760043,31.326667],
[120.759868,31.329156],
[120.788767,31.332281],
[120.796193,31.333461],
[120.815874,31.337132],
]
}
},
created(){
},
methods: {
}
}
</script>
<style>
.amap-wrapper{
height: 100%;
width:100%;
}
.company-marker {
background-color: #f56c6c;
color: #fff;
padding: 0 10px;
line-height: 24px;
border-radius: 40px;
width: 60px;
text-align: center;
position: relative;
}
.company-marker:before {
position: absolute;
content: "";
width: 0;
height: 0;
border: 6px solid transparent;
border-top-color: #f56c6c;
bottom: -12px;
left: 24px;
}
.amap-marker{
transform: translate(-9.5px, -32px) scale(1) rotate(0deg) !important;
}
.amap-icon img{
width:19px;
height: 32px;
}
</style>
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
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
【注:】
- 起始点图标和途经点图标从官网获取,"公司"样式参考样式
company-marker
+company-marker:before
- 对
el-amap-marker
应用icon
属性,图标样式显示与默认不一致,这样强制重写amap-marker
样式- 文档中未说明地图
zoom
属性,用于设置初始缩放大小
# 尾声
填充下正式数据,部署一下。
编辑 (opens new window)
上次更新: 2022/05/16, 11:05:22