MapQuest/Leaflet地图如何通过GPS坐标在标记点之间绘制路线

分两种适用场景，按需选择即可：

场景1：仅需按点位顺序展示直连折线（无需匹配实际道路） #

直接使用Leaflet原生L.polyline实现即可，无需额外调用接口、加载第三方依赖，性能最优，适合展示行程点位先后顺序的场景。
你可以在现有代码的map.fitBounds(bounds)逻辑之后，加入以下代码：

// 按现有标记点顺序提取坐标数组
const routeCoords = window.mapData.map(datum => [datum.lat, datum.lon]);
// 生成折线，可自定义样式
const connectLine = L.polyline(routeCoords, {
  color: '#FF5722',
  weight: 3,
  opacity: 0.7,
  // 如需虚线可添加dashArray参数，不需要直接删除即可
  dashArray: '4 6'
});
// 将折线添加到地图，默认会展示在标记点下层，不会遮挡你已有的标记
connectLine.addTo(map);

场景2：需要展示匹配真实路网的实际通行路线 #

你已经接入了MapQuest服务，直接调用其自带的路径规划接口即可，无需额外对接其他服务，适配性最好。
在现有代码的map.fitBounds(bounds)逻辑之后，加入以下代码即可生成对应路线：

// 按顺序提取所有点位坐标
const routeLocations = window.mapData.map(datum => `${datum.lat},${datum.lon}`);
// 调用MapQuest路径规划接口生成实际路线
L.mapquest.directions().route({
  locations: routeLocations,
  options: {
    // 出行方式可选：fastest(最快驾车)、shortest(最短驾车)、pedestrian(步行)、bicycle(骑行)
    routeType: 'fastest',
    enhancedNarrative: false
  }
}, (error, response) => {
  if(error) return;
  // 把生成的路线图层添加到地图，可自定义路线样式
  L.mapquest.directionsLayer({
    directionsResponse: response,
    showMarker: false,
    ribbonOptions: {
      color: '#2196F3',
      weight: 4,
      opacity: 0.8
    }
  }).addTo(map);
});

注意：MapQuest公开接口单次请求最多支持25个点位，如果你坐标数组的点位超过25个，可拆分成分段请求再把路线拼接即可。

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