使用 Vue.js 和百度地图 API 创建交互式地图应用

应用场景介绍

本代码演示了如何使用 Vue.js 和百度地图 API 创建交互式地图应用。该应用可以在网页上展示地图，并允许用户在地图上放置标注、打开信息窗口以及使用其他地图功能。

代码基本功能介绍

代码主要功能包括：

• 加载百度地图 API 和必要的脚本和样式文件
• 创建百度地图实例并设置中心点和缩放级别
• 创建标注并将其添加到地图中
• 创建信息窗口并将其与标注关联
• 为标注添加点击事件监听器，以便在点击时打开信息窗口

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

1. 加载百度地图 API 和脚本文件

async mounted() {
  await Promise.all([
    this.loadScripts([
      // 百度地图 API 脚本文件
      'https://api.map.baidu.com/api?type=subway&v=1.0&ak=cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc&services=&t=20240319170303',
      // WebGL 脚本文件
      '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.cdn.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',
    ]),
  ])
}

这段代码在组件的 mounted 生命周期钩子中加载必要的百度地图 API 和脚本文件。它使用 loadScripts 和 loadStyles 方法分别加载脚本和样式文件。

2. 创建百度地图实例

var map = new BMapGL.Map('allmap')

这段代码使用百度地图 API 的 BMapGL.Map 类创建一个地图实例，并将其附加到 HTML 元素 #allmap 中。

3. 设置中心点和缩放级别

var point = new BMapGL.Point(116.404, 39.925)
map.centerAndZoom(point, 15)

这段代码创建一个地图中心点（北京故宫）和缩放级别（15），然后将地图中心移动到该点并设置缩放级别。

4. 创建标注

var marker = new BMapGL.Marker(point)
map.addOverlay(marker)

这段代码使用百度地图 API 的 BMapGL.Marker 类创建一个标注，并将其添加到地图中。

5. 创建信息窗口

var opts = {
  width: 200,
  height: 100,
  title: '故宫博物院',
  message: '这里是故宫',
}
var infoWindow = new BMapGL.InfoWindow(
  '地址：北京市东城区王府井大街88号乐天银泰百货八层',
  opts,
)

这段代码使用百度地图 API 的 BMapGL.InfoWindow 类创建一个信息窗口，并设置其标题、内容和大小。

6. 为标注添加点击事件监听器

marker.addEventListener('click', function () {
  map.openInfoWindow(infoWindow, point)
})

这段代码为标注添加一个点击事件监听器。当标注被点击时，它将打开与该标注关联的信息窗口。

总结与展望

开发这段代码过程中的经验与收获

开发这段代码让我熟悉了百度地图 API 的使用，以及如何使用 Vue.js 集成第三方库。我还了解了如何使用 JavaScript 创建交互式地图应用。

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

该地图应用可以进一步拓展和优化，例如：

• 添加更多的地图功能，如绘制工具、距离测量工具和热力图
• 集成其他数据源，如实时交通数据或 POI 数据
• 优化代码结构和性能