使用 Baidu Map API 实现标记与信息窗口的展示

在现代网页应用中，地图组件的使用越来越普遍。Baidu Map API 是一个强大的地图服务工具，可以帮助开发者快速集成地图功能。本文将详细介绍如何使用 Baidu Map API 创建标记点（bm-marker）和信息窗口（bm-info-window），并提供实现这些功能的代码示例。

---

一、创建标记点（bm-marker）

1. 基本示例

标记点（bm-marker）是地图上的一个重要组件，用于标识特定位置。以下示例展示了如何在 Baidu Map 上创建一个标记点，并将其定位到特定的经纬度上。

<template>
  <baidu-map
    :center="location"
    :zoom="zoom"
    style="height: 800px; width: 100%"
    :scroll-wheel-zoom="true"
  >
    <!-- bm-marker 就是标注点，定位在 markLocation 的经纬度上 -->
    <bm-marker :position="markLocation" @click="checkDetail">
    </bm-marker>
  </baidu-map>
</template>

<script>
export default {
  data() {
    return {
      location: { lng: 116.403963, lat: 39.915119 },  // 地图中心点
      zoom: 19,  // 地图缩放级别
      markLocation: {  // 标记点的经纬度
        lng: 116.403963, lat: 39.915119
      },
    };
  },
};
</script>

2. 实现效果

通过上面的代码，我们在 Baidu Map 上成功创建了一个标记点。以下是渲染效果的示例：

二、显示信息窗口（bm-info-window）

1. 基本示例

信息窗口（bm-info-window）用于在点击标记点时显示相关信息。关键在于 show 属性，该属性控制信息窗口的显示和隐藏。

<template>
  <baidu-map
    :center="location"
    :zoom="zoom"
    style="height: 800px; width: 100%"
    :scroll-wheel-zoom="true"
  >
    <!-- bm-marker 就是标注点，定位在 markLocation 的经纬度上 -->
    <bm-marker :position="markLocation" @click="checkDetail">
      <!-- bm-info-window 用于显示标记点的详细信息 -->
      <bm-info-window :title="showTitle" :show="showFlag"></bm-info-window>
    </bm-marker>
  </baidu-map>
</template>

<script>
export default {
  data() {
    return {
      location: { lng: 116.403963, lat: 39.915119 },  // 地图中心点
      zoom: 19,  // 地图缩放级别
      markLocation: {  // 标记点的经纬度
        lng: 116.403963, lat: 39.915119
      },
      showTitle: "信息窗口",  // 信息窗口标题
      showFlag: false,  // 控制信息窗口显示的标志
    };
  },
  methods: {
    checkDetail() {
      // 切换信息窗口的显示状态
      this.showFlag = !this.showFlag;
    },
  },
};
</script>

2. 实现效果

当用户点击标记点时，信息窗口将会显示或者隐藏。以下是实现效果的 GIF 动图：

三、进一步扩展与优化

1. 自定义信息窗口内容

除了基本的标题，信息窗口可以包含更多自定义内容。例如，您可以在信息窗口中添加图片、文本或甚至 HTML 元素。以下是一个包含自定义 HTML 内容的示例：

<template>
  <baidu-map
    :center="location"
    :zoom="zoom"
    style="height: 800px; width: 100%"
    :scroll-wheel-zoom="true"
  >
    <bm-marker :position="markLocation" @click="checkDetail">
      <bm-info-window :title="showTitle" :show="showFlag">
        <div>
          <h3>{{showTitle}}</h3>
          <p>这是详细信息窗口内容，可以包含文本、图片等。</p>
          <img src="https://example.com/image.jpg" alt="示例图片" />
        </div>
      </bm-info-window>
    </bm-marker>
  </baidu-map>
</template>

<script>
export default {
  data() {
    return {
      location: { lng: 116.403963, lat: 39.915119 },
      zoom: 19,
      markLocation: { lng: 116.403963, lat: 39.915119 },
      showTitle: "详细信息",
      showFlag: false,
    };
  },
  methods: {
    checkDetail() {
      this.showFlag = !this.showFlag;
    },
  },
};
</script>

2. 实现多个标记点与信息窗口

如果需要在地图上展示多个标记点，并为每个标记点提供独立的信息窗口，可以使用数组来管理标记点和信息窗口的状态。例如：

<template>
  <baidu-map
    :center="location"
    :zoom="zoom"
    style="height: 800px; width: 100%"
    :scroll-wheel-zoom="true"
  >
    <bm-marker
      v-for="(marker, index) in markers"
      :key="index"
      :position="marker.position"
      @click="toggleInfoWindow(index)"
    >
      <bm-info-window :title="marker.title" :show="marker.showInfo">
        <div>{{ marker.content }}</div>
      </bm-info-window>
    </bm-marker>
  </baidu-map>
</template>

<script>
export default {
  data() {
    return {
      location: { lng: 116.403963, lat: 39.915119 },
      zoom: 19,
      markers: [
        { position: { lng: 116.403963, lat: 39.915119 }, title: '标记1', content: '信息1', showInfo: false },
        { position: { lng: 116.407963, lat: 39.920119 }, title: '标记2', content: '信息2', showInfo: false },
      ],
    };
  },
  methods: {
    toggleInfoWindow(index) {
      this.markers[index].showInfo = !this.markers[index].showInfo;
    },
  },
};
</script>

3. 响应式地图和标记点

为了使地图和标记点能够在不同屏幕尺寸下良好展示，可以使用响应式布局或动态调整地图的 center 和 zoom 属性。可以利用 Vue 的 watch 监听器或计算属性来动态调整这些值，从而确保良好的用户体验。

四、总结

通过本文的示例与扩展，我们详细介绍了如何使用 Baidu Map API 创建标记点和信息窗口，并展示了基本的实现效果及进一步的自定义方式。希望这些内容能帮助你更好地利用 Baidu Map API 实现地图功能，并提供优质的用户体验。

1. 创建标记点（bm-marker）:

简单直观的标记功能，可以用于标识特定地点。

2. 显示信息窗口（bm-info-window）:

展示标记点的详细信息，并通过点击事件控制其显示和隐藏。

3. 扩展与优化:

自定义信息窗口内容、实现多个标记点与信息窗口、响应式地图布局等，进一步提升用户体验和功能丰富度。

通过掌握这些基本和进阶的功能，你可以创建出功能强大的地图应用，满足不同场景下的需求。希望你在开发过程中能够不断探索和创新，打造出更加优质的应用体验。