vue 高德导航 轨迹查询，支持多条轨迹查询
效果图如下:
单个轨迹查询
多条轨迹查询
1.创建地图
<div class="mapBox">
<div id="container" style="width:87vw;height:85vh" />
</div>
2.创建自定义窗体 ，代码我放在最后面
import createInfoWindow from '@/utils/amap'
3.初始化
data() {
return {
lineArr2: [[116.478935, 30.997761], [116.478939, 38.997825], [116.478912, 38.998549], [116.478912, 38.998549], [116.478998, 38.998555]],
trackList: [],
roundList: [],
colorList: ['#e64545', '#3f57d0', '#d03fbe', '#773fd0', '#d03f75', '#3fa1d0', '#3fc9d0', '#b7b939', '#b98639', '#81ce06', '#083bf9', '#3e3b3b', '#d800ff'],
winInfo: null
}
},
4. 初始化地图
initMap() {
var that = this
this.map = new AMap.Map('container', {
resizeEnable: true, // 窗口大小调整
center: [110.478935, 35.997761], // 中心
zoom: 5
})
// 添加工具栏
this.map.plugin(['AMap.ToolBar', 'AMap.Scale'], () => {
// 工具条
const toolbar = new AMap.ToolBar()
// 比例尺
const scale = new AMap.Scale()
this.map.addControl(toolbar)
this.map.addControl(scale)
})
},
5.初始化轨迹
initroad2(i) {
const index = null
if (i > this.colorList.length) {
index = 1
}
// 绘制还未经过的路线
this.polyline = new AMap.Polyline({
map: this.map,
path: this.trackList[i].list,
showDir: true,
strokeColor: index ? this.colorList[i] : this.colorList[i], // 线颜色--蓝色
// strokeOpacity: 1, //线透明度
strokeWeight: 7, // 线宽
// strokeStyle: "solid" //线样式
lineJoin: 'round' // 折线拐点的绘制样式
})
this.map.add(this.polyline)
// 绘制坐标的圆点
const list = this.roundList[i]
for (const x in list) {
const center = list[x].center
const icons = 'https://xxxxxx/icon/Marke.png' // 绿色的圆形标记点
const imageSize = new AMap.Size(40, 40) //标记点图标大小
const sizes = new AMap.Size(40, 40) // 图标 容器大小
const offset = new AMap.Pixel(-20, -40) // 图标偏移位置
if (x == 0) {
icons = 'https://xxxx/icon/qi.png' //起点
} else if (x == list.length - 1) {
icons = 'https://xxxxxx/icon/zhong.png' //终点
} else {
icons = 'https://xxxxx/icon/Marker.png' //绿色圆形标记点
imageSize = new AMap.Size(16, 16)
sizes = new AMap.Size(16, 16)
offset = new AMap.Pixel(-5, -5)
}
this.circleMarker = new AMap.Marker({
position: center,
map: this.map,
icon: icons,
offset: offset,
size: sizes,
imageSize: imageSize
})
this.circleMarker.title = `<span>信息</span>`
this.circleMarker.content = [
'用户ID:' + list[x].info.i.userId,
'机型:' + list[x].info.i.model,
'更新时间：' + moment(parseInt(list[x].info.i.clientTime)).format('YYYY-MM-DD HH:mm:ss')
]
this.circleMarker.on('click', this.markerClick)
// this.circleMarker.emit('click', { target: this.circleMarker })
}
this.infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, -30),
isCustom: true, // 使用自定义窗体
content: this.winInfo
})
this.map.setFitView() // 合适的视口
},
6.点击标记点
markerClick(e) {
let content = e.target.content
const self = this
content = JSON.stringify(content)
this.winInfo = JSON.parse(content)
this.winTitle = e.target.title
// 设置窗体内容
this.infoWindow.setContent(
createInfoWindow.createInfoWindow(
self.winTitle,
self.winInfo.join('<br/>'),
function() {
// 关闭窗体
self.map.clearInfoWindow()
}
)
)
// 打开窗体
self.infoWindow.open(self.map, e.target.getPosition())
},
7 创建窗体 、打开窗体、关闭窗体
// 创建窗体
createInfoWindow() { const infoWindowData = new AMap.InfoWindow({ isCustom: true, // 使用自定义窗体 content: this.$refs.infoData, offset: new AMap.Pixel(16, -45) }) return infoWindowData }, // 5.打开窗体 openInfoWindow(infoWindow, marker) { infoWindow.open(this.map, marker.getPosition()) }, // 6.关闭窗体 closeInfoWindow() { this.map.clearInfoWindow() },
amap.js
// 高德导航 创建自定义窗体
function createInfoWindow(title, content, callback) {
var info = document.createElement('div')
info.className = 'custom-info input-card content-window-card'
// 可以通过下面的方式修改自定义窗体的宽高
info.style.width = '250px'
// 定义顶部标题
var top = document.createElement('div')
// var titleD = document.createElement("div");
var closeX = document.createElement('img')
top.className = 'info-top'
closeX.src = require('@/assets/close.png')
closeX.onclick = callback
// top.appendChild(titleD);
top.innerHTML = title
top.appendChild(closeX)
info.appendChild(top)
// 定义中部内容
var middle = document.createElement('div')
middle.className = 'info-middle'
middle.style.backgroundColor = 'white'
middle.innerHTML = content
info.appendChild(middle)
// 定义底部内容
var bottom = document.createElement('div')
bottom.className = 'info-bottom'
bottom.style.position = 'relative'
bottom.style.top = '0px'
bottom.style.margin = '0 auto'
info.appendChild(bottom)
return info
}
export default {
createInfoWindow
}
窗体 css
>>> .input-card{
background-color:rgba(000,000,000,0);
}
>>> .content-window-card {
position: relative;
box-shadow: none;
bottom: 0;
left: 0;
width: auto;
padding: 0;
}
>>>.content-window-card p {
height: 2rem;
}
>>> .custom-info {
/* border: solid 1px silver; */
}
>>> .info-top {
position: relative;
height: 30px;
line-height: 30px;
font-size: 14px;
padding: 0 10px;
background-color:#fdfdfd;
border-bottom:1px #eee solid;
}
>>>.info-top span:nth-child(2) {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
>>> .info-top img {
position: absolute;
top: 8px;
right: 10px;
transition-duration: 0.25s;
width: 15px;
}
>>> .info-top img:hover {
box-shadow: 0px 0px 5px #000;
}
>>>.info-middle {
background: #fdfdfd !important;
font-size: 12px;
padding: 10px 6px;
line-height: 20px;
color: #333;
}
>>>.info-bottom {
height: 0px;
width: 100%;
clear: both;
text-align: center;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid #fdfdfd;
}
>>>.info-bottom img {
position: relative;
z-index: 104;
}
>>>.info-middle img {
float: left;
margin-right: 6px;
}
