基于Google Maps JS v3实现多路线动态加载展示

嘿，我懂你碰到的痛点——网上找的方案大多是硬编码固定数量的路线点，完全没法适配你这种运单数量不固定的场景。别担心，用Google Maps的DirectionsService完全能搞定动态加载，我给你梳理一套可行的实现步骤和代码：

核心思路 #

其实核心就是把每个运单的起点终点作为独立的路线请求单元，通过循环遍历运单列表，逐个发起DirectionsService请求，拿到响应后再把路线渲染到地图上。这里要注意异步请求的处理，因为每个路线请求都是异步的，得确保每个请求的结果都能正确渲染，不会互相干扰。

具体实现步骤&代码示例 #

1. 先准备好你的运单数据 #

假设你的运单数据是一个数组，每个元素包含起点（可以是经纬度或地址字符串）和终点：

// 示例运单数据，数量可以动态增减
const shipments = [
  { start: "北京天安门", end: "北京故宫" },
  { start: "上海外滩", end: "上海迪士尼" },
  // 可以继续添加更多运单...
];

2. 初始化地图和核心服务实例 #

先创建地图实例，同时初始化DirectionsService（负责发起路线请求）和DirectionsRenderer（负责渲染路线）：

// 初始化地图
const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 39.9042, lng: 116.4074 }, // 初始中心点，可根据运单动态调整
  zoom: 10,
});

// 创建路线服务实例
const directionsService = new google.maps.DirectionsService();

3. 编写动态处理单个运单的函数 #

写一个通用函数，接收单个运单的起点终点，发起请求并渲染路线。为了区分不同运单的路线，我们给每个路线分配独立的渲染器和随机颜色：

function renderShipmentRoute(shipment) {
  // 为每个运单创建独立的渲染器，避免路线样式冲突
  const directionsRenderer = new google.maps.DirectionsRenderer({
    map: map,
    polylineOptions: {
      strokeColor: `#${Math.floor(Math.random()*16777215).toString(16)}`, // 随机颜色区分路线
      strokeWeight: 4,
    },
  });

  directionsService.route({
    origin: shipment.start,
    destination: shipment.end,
    travelMode: google.maps.TravelMode.DRIVING, // 可根据需求换成WALKING/TRANSIT等
  }, (response, status) => {
    if (status === google.maps.DirectionsStatus.OK) {
      // 成功拿到路线数据，渲染到地图上
      directionsRenderer.setDirections(response);
    } else {
      console.error(`运单路线请求失败: ${status}`);
      // 这里可以添加错误提示逻辑，比如给用户显示哪个运单加载失败
    }
  });
}

4. 遍历运单列表，批量处理 #

最后只需要循环你的运单数组，逐个调用上面的函数就行：

// 遍历所有运单，动态生成路线
shipments.forEach(shipment => {
  renderShipmentRoute(shipment);
});

额外优化建议 #

• 如果运单数量很多，考虑加入请求节流，避免一次性发起太多请求触发Google Maps的API限制；
• 可以给每个路线添加信息窗口（InfoWindow），点击路线时显示对应的运单信息；
• 如果需要调整地图视野，让所有路线都能显示，可以在所有路线渲染完成后，计算所有路线的边界，调用map.fitBounds()来自动调整视野。

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