使用百度地图 Web 端 API 在 Vue 中实现信息窗口

应用场景介绍

在开发基于地图的 Web 应用时，信息窗口是一种常见的组件，用于显示有关特定地理位置的附加信息。例如，在房产应用中，信息窗口可以显示房产的详细信息、图片和价格。

代码基本功能介绍

本代码演示了如何使用百度地图 Web 端 API 在 Vue 组件中实现一个信息窗口。该信息窗口可以动态打开、关闭、显示和隐藏，并支持自动平移功能。

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

1. 加载百度地图 API

首先，需要加载百度地图 API 的 JavaScript 和 CSS 文件：

await this.loadScript(
  'https://api.map.baidu.com/api?type=subway&v=1.0&ak=cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc&services=&t=20240319170303',
)
await this.loadScript(
  'http://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc&services=&t=20240319170303',
)
await this.loadScript(
  'https://mapopen.bj.bcebos.com/github/BMapGLLib/InfoBox/src/InfoBox.js',
)
await this.loadStyle()

2. 创建百度地图实例

加载 API 后，创建一个百度地图实例：

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

3. 创建信息窗口

使用 BMapGLLib.InfoBox 类创建信息窗口：

var infoBox = new BMapGLLib.InfoBox(map, html.join(''), {
  boxStyle: {
    background: '#6cb2fa',
    width: '270px',
    height: '300px',
  },
  closeIconMargin: '1px 1px 0 0',
  closeIconUrl:
    '//mapopen.bj.bcebos.com/github/BMapGLLib/InfoBox/examples/images/close.png',
  enableAutoPan: true,
  align: INFOBOX_AT_BOTTOM,
  offset: new BMapGL.Size(15, -150),
})

4. 添加标记并绑定信息窗口

创建标记并将其添加到地图上：

var marker = new BMapGL.Marker(poi)
// map.addOverlay(marker);
infoBox.open(marker)

5. 添加按钮控制

使用 Vue 中的 ref 绑定按钮事件，控制信息窗口的打开、关闭、显示和隐藏：

$('close').onclick = function () {
  infoBox.close()
}
$('open').onclick = function () {
  infoBox.open(marker)
}
$('show').onclick = function () {
  infoBox.show()
}
$('hide').onclick = function () {
  infoBox.hide()
}

6. 启用/禁用自动平移

信息窗口默认启用自动平移，当信息窗口打开时，地图会自动平移到信息窗口的中心位置。可以通过以下代码启用/禁用自动平移：

$('enableAutoPan').onclick = function () {
  infoBox.enableAutoPan()
}
$('disableAutoPan').onclick = function () {
  infoBox.disableAutoPan()
}

总结与展望

通过这段代码，我们实现了在 Vue 中使用百度地图 Web 端 API 创建和控制信息窗口。该组件可以轻松集成到地图应用中，为用户提供额外的信息。

未来，该卡片功能可以进一步拓展和优化：

• 添加更多信息，如房源的联系方式、户型图等。
• 实现信息窗口的拖拽和缩放功能。
• 优化信息窗口的样式和交互体验。