基于Vue.js的百度地图搜索卡片实现

应用场景

该代码主要用于实现基于Vue.js的百度地图搜索功能，可应用于各类需要地图搜索功能的Web应用，如旅游网站、房地产网站、物流管理系统等。

基本功能

该代码提供以下基本功能：

• 加载百度地图API
• 初始化地图，设置中心点和缩放级别
• 实现本地搜索功能，查询指定区域内的公园信息
• 将搜索结果以列表形式展示在页面上

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

1. 加载百度地图API

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',
  ]),
])

此代码段使用Promise.all并发加载百度地图API所需的脚本和样式文件。

2. 初始化地图

var map = new BMapGL.Map('l-map')
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11)

此代码段实例化一个百度地图对象，并设置其中心点和缩放级别。

3. 实现本地搜索功能

var options = {
  onSearchComplete: function (results) {
    // 判断状态是否正确
    if (local.getStatus() == BMAP_STATUS_SUCCESS) {
      var s = []
      for (var i = 0; i < results.getCurrentNumPois(); i++) {
        s.push(results.getPoi(i).title + ', ' + results.getPoi(i).address)
      }
      document.getElementById('r-result').innerHTML = s.join('<br/>')
    }
  },
}
var local = new BMapGL.LocalSearch(map, options)
local.search('公园')

此代码段创建了一个本地搜索对象，并设置了搜索完成后的回调函数。在回调函数中，判断搜索状态是否成功，并提取搜索结果中的标题和地址信息，将结果以列表形式展示在页面上。

总结与展望

开发过程中的经验与收获

• 掌握了百度地图API的使用方法，包括地图初始化、本地搜索等功能。
• 了解了Vue.js中生命周期钩子的作用，以及如何利用它们异步加载资源。
• 提升了代码组织和可维护性。

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

• 优化搜索结果展示方式，如在地图上标记搜索结果或提供更详细的地址信息。
• 添加其他地图功能，如路径规划、POI详情展示等。
• 提高代码的健壮性，处理各种异常情况。