百度地图（BMap）设置标点，显示信息【vue】

修炼室

已于 2024-09-08 15:20:08 修改

阅读量4k

点赞数 2

分类专栏：前端学习文章标签： vue.js 前端百度地图标点信息窗口

于 2021-12-16 16:29:46 首次发布

本文链接：https://blog.csdn.net/qq_22841387/article/details/121977855

版权

前端学习专栏收录该内容

89 篇文章 5 订阅

订阅专栏

使用 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>