在HTML5页面中展示实时路况，本质是利用地图服务商提供的JavaScript SDK，在已初始化的地图上叠加一个实时路况图层。该图层会定时从服务端拉取路网拥堵数据，并以红、黄、绿等颜色渲染在道路上方。不同地图平台的接口设计略有差异，但整体思路一致：引入SDK、创建地图实例、开启路况图层。
一、高德地图实现实时路况
高德地图开放平台提供了独立的AMap.Traffic类，用于展示实时交通状况。开发者需要先注册账号并创建应用，获取Web端JS API的Key，然后在页面中通过script标签异步加载SDK。加载完成后，在地图初始化逻辑里实例化交通图层并添加到地图即可。
需要注意的是，高德实时路况默认每间隔一段时间自动刷新，开发者也可以通过autoRefresh参数控制是否自动更新，或者通过interval设定刷新周期。如果不希望自动刷新，可手动调用Traffic实例的show与hide方法配合定时任务。以下代码演示了最基础的接入方式：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>高德实时路况示例</title>
<style>#map{width:100%;height:400px;}</style>
</head>
<body>
<div id="map"></div>
<script src="https://webapi.amap.com/maps?v=2.0&key=你的Key"></script>
<script>
// 初始化地图
var map = new AMap.Map('map', {
zoom: 11,
center: [116.397428, 39.90923]
});
// 创建实时路况图层
var traffic = new AMap.Traffic({
autoRefresh: true,
interval: 180
});
// 将路况图层添加到地图
traffic.setMap(map);
</script>
</body>
</html>
上述代码中，autoRefresh设为true代表地图会自动请求最新路况；interval单位为秒，这里配置为三分钟刷新一次，避免过于频繁请求触发配额限制。实际项目中，如果页面仅展示局部区域，建议缩小zoom级别或限定地图显示范围，以减少流量消耗。
高德路况图层的优势在于色彩区分明确，且支持与覆盖物、标记点共存。缺点是必须绑定安全密钥（2021年后申请的Key需搭配安全密钥使用），否则浏览器会报INVALID_USER_SCODE错误。此时需要在入口处通过window._AMapSecurityConfig配置安全密钥字段。
二、百度地图实现实时路况
百度地图JavaScript API中，实时路况的开启方式比高德更简单，不需要单独引入图层类，而是直接在Map实例上调用setTrafficOn方法。该方法内部会自动加载路况瓦片并叠加显示。百度路况同样以颜色表示拥堵程度：绿色畅通、黄色缓行、红色拥堵。
使用百度地图前，也要在控制台申请浏览器端AK，并在script引用时作为ak参数传入。如果AK与调用域名不匹配，地图会提示“权限验证失败”。下面示例展示了如何在HTML5页面打开百度实时路况：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>百度实时路况示例</title>
<style>#map{width:100%;height:400px;}</style>
</head>
<body>
<div id="map"></div>
<script src="https://api.map.baidu.com/api?v=3.0&ak=你的AK"></script>
<script>
var map = new BMap.Map('map');
map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
// 开启实时路况
map.setTrafficOn();
</script>
</body>
</html>
百度地图的setTrafficOn没有额外参数，默认就会持续刷新。若要关闭，可调用setTrafficOff。由于百度路况集成在核心API内，代码量更少，适合快速原型开发。但在定制化方面不如高德灵活，例如无法单独设置刷新间隔。
从兼容性看，百度JS API对旧版IE支持更好，而高德v2.0更偏向现代浏览器。如果项目需要兼顾移动端HTML5混合开发，两者都提供了viewport自适应方案，只需保证地图容器使用百分比宽度即可。
三、常见问题与优化建议
很多人在接入实时路况时发现地图空白或只显示底图，多半是Key配置或域名白名单问题。各平台都要求调用来源的域名必须登记，本地调试可用127.0.0.1或192.168.0.1临时测试，但上线前要替换为正式域名。另一个常见误区是以为路况图层能离线工作，实际上它依赖网络实时拉取瓦片，断网后颜色会消失。
在性能优化上，若页面同时存在多个地图实例，应避免每个都开启路况，可改为用户点击按钮后再动态加载。此外，使用HTML5的navigator.geolocation获取当前位置后，将地图中心移到用户附近再开路况，能提升实用性。示例代码如下：
// 获取用户位置并开启路况
navigator.geolocation.getCurrentPosition(function(pos){
var lng = pos.coords.longitude;
var lat = pos.coords.latitude;
map.setCenter(new BMap.Point(lng, lat));
map.setTrafficOn();
}, function(err){
console.log('定位失败，使用默认城市路况');
map.setTrafficOn();
});
最后提醒，实时路况接口通常有每日配额，公开页面如果被大量爬取，可能导致Key被封。建议配合服务端代理或验证码机制，对异常流量做限制。掌握上述技巧后，HTML5页面展示实时路况就成为一项简单且稳定的功能。