如何通过Google Maps API配置典型交通弹窗及获取道路实际速度

嘿，我刚好折腾过类似的需求，咱们一步步来搞定这个问题：

1. 自定义实现Typical Traffic弹窗 #

Google Maps JS API本身没有直接提供网页版那种现成的Typical Traffic弹窗，但我们可以自己结合TrafficLayer的历史交通数据能力，做一个完全自定义的弹窗控件。

步骤1：初始化地图与TrafficLayer #

先把基础的地图和交通层搭起来：

// 初始化地图（替换成你的API密钥）
const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 39.9629667, lng: -82.9783564 },
  zoom: 12,
});

// 创建并添加交通层到地图
const trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);

步骤2：制作自定义弹窗UI #

用HTML/CSS写一个简单的控制面板，放在地图上方：

<!-- 自定义Typical Traffic控制面板 -->
<div id="traffic-control-panel" style="position: absolute; top: 10px; right: 10px; background: #fff; padding: 16px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); z-index: 1000;">
  <h4 style="margin: 0 0 12px 0;">Typical Traffic</h4>
  <div style="margin-bottom: 10px;">
    <label style="display: block; margin-bottom: 4px;">星期：</label>
    <select id="day-select" style="width: 100%; padding: 6px;">
      <option value="0">周日</option>
      <option value="1" selected>周一</option>
      <option value="2">周二</option>
      <option value="3">周三</option>
      <option value="4">周四</option>
      <option value="5">周五</option>
      <option value="6">周六</option>
    </select>
  </div>
  <div style="margin-bottom: 12px;">
    <label style="display: block; margin-bottom: 4px;">时间：</label>
    <select id="hour-select" style="width: 100%; padding: 6px;">
      <!-- 自动生成0-23小时选项 -->
      ${Array.from({length:24}, (_,i) => `<option value="${i}">${i.toString().padStart(2, '0')}:00</option>`).join('')}
    </select>
  </div>
  <button id="apply-traffic" style="width: 100%; padding: 8px; background: #4285F4; color: #fff; border: none; border-radius: 4px; cursor: pointer;">应用</button>
</div>

步骤3：绑定弹窗与TrafficLayer的交互 #

监听弹窗的选择事件，更新交通层的历史交通模型：

// 获取控件元素
const daySelect = document.getElementById('day-select');
const hourSelect = document.getElementById('hour-select');
const applyBtn = document.getElementById('apply-traffic');

// 应用按钮点击事件
applyBtn.addEventListener('click', () => {
  const selectedDay = parseInt(daySelect.value); // 0=周日，6=周六
  const selectedHour = parseInt(hourSelect.value); // 0-23小时

  // 设置交通层显示指定日期时间的典型交通数据
  trafficLayer.setTrafficModel({
    day: selectedDay,
    hour: selectedHour
  });
});

这样用户就能通过弹窗选择星期和时间，地图上的交通层会自动切换到对应时段的典型流量状态。

2. 获取道路实际速度 #

要获取道路的实时/实际速度，我们可以结合Directions API或Roads API来实现：

方法1：用Directions API获取路段实时速度 #

通过请求路线，我们可以拿到每个路段的实时交通速度和限速：

// 初始化Directions服务
const directionsService = new google.maps.DirectionsService();

// 示例：请求两点之间的路线，包含实时交通数据
directionsService.route({
  origin: { lat: 39.9629667, lng: -82.9783564 },
  destination: { lat: 39.95, lng: -82.98 },
  travelMode: google.maps.TravelMode.DRIVING,
  drivingOptions: {
    departureTime: new Date(), // 使用当前时间获取实时交通
    trafficModel: 'bestguess' // 可选：bestguess/pessimistic/optimistic
  }
}, (response, status) => {
  if (status === google.maps.DirectionsStatus.OK) {
    // 遍历路线中的每个路段
    response.routes[0].legs[0].steps.forEach((step, index) => {
      console.log(`路段 ${index+1}：`);
      if (step.speedLimit) {
        console.log(`  限速：${step.speedLimit} km/h`);
      }
      if (step.trafficSpeed) {
        console.log(`  实际速度：${step.trafficSpeed} km/h`);
      }
    });
  } else {
    console.error(`获取路线失败：${status}`);
  }
});

方法2：用Roads API获取指定道路的速度限制 #

如果你需要单独查询某条道路的限速，可以调用Roads API的Speed Limits服务（需要先在控制台启用Roads API）：

// 示例：获取指定坐标点的道路限速
const roadsService = new google.maps.RoadsService();

roadsService.speedLimits({
  path: [{ lat: 39.9629667, lng: -82.9783564 }],
  units: 'KPH' // 可选：KPH/MPS
}, (response, status) => {
  if (status === google.maps.RoadsStatus.OK) {
    response.speedLimits.forEach(limit => {
      console.log(`道路限速：${limit.speedLimit} km/h`);
    });
  } else {
    console.error(`获取限速失败：${status}`);
  }
});

注意事项 #

• 确保你在Google Cloud控制台启用了Maps JavaScript API、Directions API和Roads API，并给API密钥配置了正确的权限。
• TrafficLayer.setTrafficModel()是API的较新特性，确保你加载的是最新版本的Maps JS API。

内容的提问来源于stack exchange，提问作者Matt Westlake