近期在做的项目中要求使用高德地图显示车辆轨迹,需求内容比较简单。因为是初次接触地图在项目中的使用。特此发文记录一下,防止忘记。
首先看一下目前做的效果图:
下面我将分步展示实现方法:
(1)引入高德地图
这里我采用的是静态引入的方式,将高德地图的cdn静态链接引入到public文件夹中的index.html中即可。示例如下:
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=“这里是你申请的key”&plugin=AMap.MouseTool&plugin=AMap.Geocoder&plugin=AMap.MarkerClusterer&plugin=AMap.Geolocation&plugin=AMap.setPointToCenter&plugin=AMap.PlaceSearch"></script>
<script src="//webapi.amap.com/ui/1.1/main.js"></script>
(2)代码实现
首先在template中实现一个容器
<div id="map"></div>
<el-drawer :visible.sync="infoShow" :with-header="false" custom-class="my-drawer" :modal="false" direction="btt" :show-close="false"></el-drawer>
注意容器要给宽高否则地图将无法初始化
#map {
width: calc(100% + 40px);
margin-left: -20px !important;
height: 750px;
}
然后在mounted的生命周期钩子中进行初始化操作:
data() {
return {
carsList: [],
zoom: 14,
center: [120.45852, 32.54514],
iconMeta: [100, 54],
markerMeta: [40, 60],
startMarker: null,
infoWindow: null,
polyLine: null,
map: null,
infoShow: false,
travelList: []
}
},
mounted() {
this.initMap()
},
methods: {
initMap() {
this.map = new AMap.Map("map", {
// 放大级别
zoom: this.zoom,
// 放大缩小
resizeEnable: true,
// 位置
center: this.center,yin
// 是否显示地图文字标记
showLabel: true,
});
},
}
到这儿地图应该可以展示了,接下来我们根据后端返回的数据进行markers渲染:
接口数据如下
{"msg":"操作成功","code":200,"data":[{"plate":"京D11111","travelList":[{"travelId":3,"plate":"京D11111","driverName":"驾驶员06","longitude":120.443876,"latitude":32.529353,"collectTime":"2022-01-27 05:16:23","departureTime":"2022-01-27 02:21:39","departurePlace":null,"vehicleTerminal":null,"arrivalTime":null,"vehicleLocation":"海安市中城街道江海西路"},{"travelId":4,"plate":"京D11111","driverName":"驾驶员06","longitude":120.447971,"latitude":32.531086,"collectTime":"2022-01-27 05:16:23","departureTime":"2022-01-27 02:21:39","departurePlace":null,"vehicleTerminal":null,"arrivalTime":null,"vehicleLocation":"海安市中城街道江海西路鹏福公寓"},{"travelId":5,"plate":"京D11111","driverName":"驾驶员06","longitude":120.456608,"latitude":32.534791,"collectTime":"2022-01-27 05:16:23","departureTime":"2022-01-27 02:21:39","departurePlace":null,"vehicleTerminal":null,"arrivalTime":null,"vehicleLocation":"海安市中城街道江海西路润洋花园"},{"travelId":6,"plate":"京D11111","driverName":"驾驶员06","longitude":120.455607,"latitude":32.536035,"collectTime":"2022-01-27 05:16:23","departureTime":"2022-01-27 02:21:39","departurePlace":null,"vehicleTerminal":null,"arrivalTime":null,"vehicleLocation":"海安市中城街道小焦港河东侧北巷中洋·现代城"},{"travelId":7,"plate":"京D11111","driverName":"驾驶员06","longitude":120.455256,"latitude":32.536621,"collectTime":"2022-01-27 05:16:23","departureTime":"2022-01-27 02:21:39","departurePlace":null,"vehicleTerminal":null,"arrivalTime":null,"vehicleLocation":"海安市中城街道小焦港河东侧北巷中洋·现代城"},{"travelId":8,"plate":"京D11111","driverName":"驾驶员06","longitude":120.455211,"latitude":32.536950,"collectTime":"2022-01-27 05:16:23","departureTime":"2022-01-27 02:21:39","departurePlace":null,"vehicleTerminal":null,"arrivalTime":null,"vehicleLocation":"海安市中城街道小焦港河东侧北巷瑞海如意紫都"},{"travelId":9,"plate":"京D11111","driverName":"驾驶员06","longitude":120.455016,"latitude":32.537396,"collectTime":"2022-01-27 05:16:23","departureTime":"2022-01-27 02:21:39","departurePlace":null,"vehicleTerminal":null,"arrivalTime":null,"vehicleLocation":"海安市中城街道曙光西路中洋·现代城"},{"travelId":2,"plate":"京D11111","driverName":"驾驶员06","longitude":120.442825,"latitude":32.529007,"collectTime":"2022-01-27 05:16:13","departureTime":"2022-01-27 02:21:39","departurePlace":"gsg","vehicleTerminal":null,"arrivalTime":"2022-01-27 02:21:39","vehicleLocation":"海安市中城街道江海西路"},{"travelId":1,"plate":"京D11111","driverName":"驾驶员06","longitude":120.441766,"latitude":32.528713,"collectTime":"2022-01-27 02:33:57","departureTime":"2022-01-27 02:21:39","departurePlace":"gsg","vehicleTerminal":null,"arrivalTime":"2022-01-27 02:21:39","vehicleLocation":"海安市中城街道江海西路"}]}]}
根据数据渲染makers
methods: {
getList() {
getTrackList(this.queryParams).then((res) => {
this.carsList = res.data || []
this.initMakers()
})
},
initMakers() {
this.map.clearMap() // 清理掉之前的所有makers
this.carsList.forEach((car, index) => {
let position = car.travelList.length ? car.travelList[0] : { longitude: 0, latitude: 0}
let image = require('@/assets/images/car.png')
let icon = new AMap.Icon({
size: new AMap.Size(this.iconMeta[0], this.iconMeta[1]), // 图标尺寸
image: image,
imageSize: new AMap.Size(this.iconMeta[0], this.iconMeta[1]), // 根据所设置的大小拉伸或压缩图片
});
let marker = new AMap.Marker({
position: [ position.longitude, position.latitude ],
offset: new AMap.Pixel(-100, -30),
icon: icon,
map: this.map,
extData: car,
});
marker.on("click", () => this.markerClick(car));
})
},
}
点击marker显示轨迹:
markerClick(car) {
// 因为轨迹只要一次显示一条,所以在渲染上一条要先清理掉之前的那条以及开始的图标
if(this.polyLine && this.startMarker) {
this.map.remove(this.polyLine)
this.map.remove(this.startMarker)
}
let maker = car.travelList && car.travelList.slice(-1)[0]
let image = require('@/assets/images/start-point.png')
let icon = new AMap.Icon({
size: new AMap.Size(this.markerMeta[0], this.markerMeta[1]), // 图标尺寸
image: image,
imageSize: new AMap.Size(this.markerMeta[0], this.markerMeta[1]), // 根据所设置的大小拉伸或压缩图片
});
this.startMarker = new AMap.Marker({
position: [ maker.longitude, maker.latitude ],
offset: new AMap.Pixel(-20, -60),
icon: icon,
map: this.map
});
let lineList = []
car.travelList && car.travelList.forEach((item) => {
let point = new AMap.LngLat(item.longitude, item.latitude)
lineList.push(point)
})
this.polyLine = new AMap.Polyline({
path: lineList,
borderWeight: 2, // 线条宽度,默认为 1
strokeStyle: "dashed",
strokeColor: '#428100', // 线条颜色
lineJoin: 'round' // 折线拐点连接处样式
})
this.map.add(this.polyLine)
this.travelList = car.travelList ? car.travelList : []
this.infoShow = true
}
至此渲染列表以及点击marker出现轨迹以及底部出现轨迹信息就实现了。初次发帖内容空洞代码丑陋还请多多包涵~