先放效果图
1、准备工作
路况信息只需要使用web端即可实现
2、代码部分
(1)在/public/index.html中引入
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=准备工作中添加的key"></script>
(2)在需要用到地图的页面中
<template>
<div class="traffic-congestion-data-container">
<div id="amap-container" class="amap-container" />
</div>
</template>
<script>
export default {
data() {
return {
longAndLat: [108.94703, 34.25943]
}
},
mounted() {
this.init()
},
methods: {
init() {
var map = new AMap.Map('amap-container', {
// 地图中心位置
center: this.longAndLat,
resizeEnable: true,
// 主题色
mapStyle: 'amap://styles/darkblue',
// 地图层级
zoom: 12
})
// 实时路况图层
var trafficLayer = new AMap.TileLayer.Traffic({
zIndex: 10,
zooms: [7, 20]
})
trafficLayer.setMap(map)
}
}
}
</script>
官方给出了11中主题样式,没有满足需求的也可自定义主题
标准:normal
幻影黑:dark
月光银:light
远山黛:whitesmoke
草色青:fresh
雅士灰:grey
涂鸦:graffiti
马卡龙:macaron
靛青蓝:blue
极夜蓝:darkblue
酱籽:wine
(3)隐藏高德地图左下角logo,在/public/index.html中写入样式
<style type="text/css">
.amap-logo{
display: none;
opacity:0 !important;
}
.amap-copyright {
opacity:0;
}
</style>
最后附上官方示例地址:实时路况图层-高德官方图层-示例中心-JS API 2.0 示例 | 高德地图API