Vue3 使用 Vue3-Baidu-Map-GL 构建地址列表页面

应用场景介绍

在移动端应用中，用户地址管理是一个常见的功能，该功能允许用户查看、添加和编辑其地址信息。本文将介绍如何使用 Vue3 和 Vue3-Baidu-Map-GL 构建一个简单的地址列表页面，用户可以在其中查看和编辑其地址。

代码基本功能介绍

该代码的基本功能如下：

• 显示一个包含两个地址的地址列表。
• 当用户点击地址时，导航到编辑地址页面。

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

1. 安装依赖项

npm install vue3-baidu-map-gl

2. 导入组件

在 Vue 组件中导入 BMap 组件。

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

3. 定义地址数据

使用 ref 定义一个包含地址数据的响应式对象。

const addresses = ref([
  {
    type: "home",
    address: "Kings Street 20, Southfield, Michigan (MI), 48075",
  },
  {
    type: "work",
    address: "Mulberry Avenue 2415, Eugene, Oregon (OR), 97402",
  },
]);

4. 渲染地址列表

使用 v-for 循环渲染地址列表。

<div class="addresses">
  <van-cell
    v-for="address in addresses"
    :key="address.type"
    title="Home Address"
    value="Kings Street 20, Southfield, Michigan (MI), 48075"
    is-link
    @click="changeAddress('home')"
  />
  <van-cell
    v-for="address in addresses"
    :key="address.type"
    title="Work Address"
    value="Mulberry Avenue 2415, Eugene, Oregon (OR), 97402"
    is-link
    @click="changeAddress('work')"
  />
</div>

5. 定义地址编辑函数

定义一个 changeAddress 函数，当用户点击地址时调用该函数。该函数使用 uni.navigateTo 方法导航到编辑地址页面，并传递地址类型作为参数。

const changeAddress = (type) => {
  uni.navigateTo({
    url: `/pages/address/edit?type=${type}`,
  });
};

总结与展望

开发过程中的经验与收获

• 学习了如何使用 Vue3-Baidu-Map-GL 组件。
• 理解了如何使用 ref 来管理响应式数据。
• 掌握了如何使用 v-for 循环渲染列表。

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

• 添加地图功能，允许用户在地图上查看地址。
• 支持用户添加新地址。
• 优化地址列表的样式和布局。