Vue3 百度地图与卡片展示组件

应用场景介绍

本代码段适用于需要在网页或移动应用中展示地图和相关信息的场景，如自行车租赁系统、导航应用等。

代码基本功能介绍

该代码段集成了 Vue3 和 vue3-baidu-map-gl 库，实现了在 Vue 组件中使用百度地图的功能。它允许开发者在页面中展示地图，并在地图上添加标记和信息卡片。

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

1. 安装依赖

npm install vue3-baidu-map-gl --save

2. 导入组件

import { BMap } from "vue3-baidu-map-gl";

3. 创建地图组件

<BMap
  :ak="ak"
  :center="center"
  :zoom="zoom"
  style="width: 100%; height: 400px"
>
  <template #default="{ $baiduMap }">
    <div>
      <div
        v-for="marker in markers"
        :key="marker.id"
        :style="{ left: marker.x + 'px', top: marker.y + 'px' }"
        class="marker"
      >
        <img :src="marker.icon" alt="" />
      </div>
    </div>
  </template>
</BMap>

• :ak：百度地图 API 密钥。
• :center：地图中心点经纬度。
• :zoom：地图缩放级别。
• #default：地图加载完成后渲染的模板。

4. 添加标记

const markers = ref([
  {
    id: 1,
    x: 100,
    y: 100,
    icon: "https://source.unsplash.com/random/50x50",
  },
  {
    id: 2,
    x: 200,
    y: 200,
    icon: "https://source.unsplash.com/random/50x50",
  },
  {
    id: 3,
    x: 300,
    y: 300,
    icon: "https://source.unsplash.com/random/50x50",
  },
]);

• markers：一个响应式数组，存储标记信息。

5. 添加信息卡片

<div class="bike-info">
  <div class="bike-name">
    {{ bike.name }}
  </div>
  <div class="bike-price">${{ bike.price }}</div>
  <div class="bike-desc">
    {{ bike.desc }}
  </div>
  <div class="bike-btn">
    <van-button type="primary" @click="rentBike">Rent Bike</van-button>
  </div>
</div>

• bike：一个响应式对象，存储自行车信息。
• rentBike：点击按钮触发的事件处理函数。

总结与展望

开发这段代码的过程让我深入了解了 Vue3 和 vue3-baidu-map-gl 的使用。我学会了如何在 Vue 组件中使用百度地图，并在地图上添加标记和信息卡片。

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

• 添加更多信息，如自行车类型、剩余电量等。
• 实现用户交互，如点击标记显示更多信息或预订自行车。
• 优化代码结构和样式，提高代码可维护性和可读性。