使用百度地图API实现公交路线查询功能

应用场景

本代码用于在网页中实现公交路线查询功能，用户可以输入起点和终点，查询两点之间的公交路线、时长和距离。该功能可广泛应用于出行规划、地图导航等场景。

基本功能

该代码的基本功能如下：

• 加载百度地图API和相关的脚本、样式文件。
• 创建百度地图实例，并设置中心点和缩放级别。
• 创建公交路线查询对象，并设置查询参数。
• 根据用户输入的起点和终点，发起公交路线查询。
• 处理查询结果，获取公交路线、时长和距离，并显示在页面上。

功能实现步骤及关键代码分析

1. 加载百度地图API和相关资源

async mounted() {
  await Promise.all([
    this.loadScripts([
      'https://api.map.baidu.com/api?type=subway&v=1.0&ak=cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc&services=&t=20240319170303',
      'http://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc&services=&t=20240319170303',
      'https://mapopen.bj.bcebos.com/github/BMapGLLib/InfoBox/src/InfoBox.js',
      'https://mapopen.bj.bcebos.com/github/BMapGLLib/RichMarker/src/RichMarker.min.js',
      'https://mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js',
      'https://mapopen.cdn.bcebos.com/github/BMapGLLib/DistanceTool/src/DistanceTool.min.js',
    ]),
    this.loadStyles([
      'http://api.map.baidu.com/res/webgl/10/bmap.css',
      'http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css',
    ]),
  ])
}

使用loadScripts和loadStyles方法异步加载百度地图API、脚本和样式文件。

2. 创建百度地图实例

var map = new BMapGL.Map('container')
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12)

创建百度地图实例map，并设置中心点为北京（经度：116.404，纬度：39.915），缩放级别为12。

3. 创建公交路线查询对象

var transit = new BMapGL.TransitRoute(map, {
  renderOptions: { map: map },
  onSearchComplete: function (results) {
    if (transit.getStatus() != BMAP_STATUS_SUCCESS) {
      return
    }
    var plan = results.getPlan(0)
    output +=
      '总时长：' + plan.getDuration(true) + '    ' //获取时间
    output += '总路程：' + plan.getDistance(true) //获取距离
    $('#result').css('display', 'block')
    $('#result').html(output)
  },
})

创建公交路线查询对象transit，并设置查询结果处理函数onSearchComplete。该函数会在查询成功后执行，获取查询结果并显示在页面上。

4. 发起公交路线查询

var start = new BMapGL.Point(116.404844, 39.911836)
var end = new BMapGL.Point(116.308102, 40.056057)
transit.search(start, end)

定义起点start和终点end的坐标，并调用transit.search方法发起公交路线查询。

总结与展望

开发过程中的经验与收获：

• 深入了解了百度地图API的用法，特别是公交路线查询相关功能。
• 掌握了异步加载外部资源和处理查询结果的技巧。
• 提高了代码组织和可读性。

未来该卡片功能的拓展与优化：

• 支持多模式查询，如公交、地铁、驾车等。
• 提供更详细的查询结果，如途经站点、换乘信息等。
• 优化用户交互体验，如自动填充起点和终点、提供路线优化建议等。