Vue.js 中使用百度地图和卡片组件构建地图应用

应用场景介绍

本代码片段展示了如何在 Vue.js 应用中集成百度地图和卡片组件，以创建具有交互式地图和医生信息卡片的应用。此类应用可用于展示地理位置信息、查找附近设施或提供其他基于位置的服务。

代码基本功能介绍

此代码的主要功能包括：

• 在页面中显示百度地图，并在地图中心放置一个标记。
• 使用卡片组件显示医生的信息，包括头像、姓名、类型、评分等。
• 地图和卡片组件是动态的，可以通过改变 center 和 doctor 响应式对象的值进行更新。

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

1. 安装依赖项

npm install vue3-baidu-map-gl van-ui

2. 导入组件和响应式对象

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

const doctor = ref({
  name: "Dr. Pedro",
  type: "Pediatrician",
  rating: 4.2,
  avatar: "https://source.unsplash.com/random/100x100",
});

const center = ref({
  lng: 116.403874,
  lat: 39.915119,
});

3. 初始化地图和卡片

<template>
  <div>
    <van-nav-bar title="Map" left-arrow fixed :border="false" :z-index="999" />
    <div class="map-container">
      <BMap
        :ak="'cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc'"
        :center="center"
        :zoom="12"
        style="width: 100%; height: 100%"
      >
        <BMap.Marker :position="center" />
      </BMap>
    </div>
    <van-card :style="{ 'margin-top': '10px' }" class="doctor-card" clickable>
      <template #title>
        <div class="doctor-info">
          <div class="doctor-avatar">
            <img :src="doctor.avatar" alt="" />
          </div>
          <div class="doctor-name">
            <span>{{ doctor.name }}</span>
            <van-tag type="primary" size="small">{{ doctor.type }}</van-tag>
          </div>
          <div class="doctor-rating">
            <van-rate :value="doctor.rating" :disabled="true" />
          </div>
        </div>
      </template>
    </van-card>
  </div>
</template>

4. 样式化卡片

.doctor-card {
  margin-top: 10px;
}

.doctor-info {
  display: flex;
  align-items: center;
}

.doctor-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.doctor-name {
  font-size: 16px;
  font-weight: bold;
}

.doctor-type {
  font-size: 14px;
  color: #999;
}

.doctor-rating {
  margin-left: auto;
}

总结与展望

通过这段代码，我们了解了如何将百度地图和卡片组件集成到 Vue.js 应用中。

开发过程中的经验与收获：

• 使用 Vue.js 的响应式对象可以轻松地更新地图和卡片组件。
• 百度地图 API 提供了丰富的功能，允许我们自定义地图外观和行为。
• 卡片组件提供了灵活的样式选项，可以根据需要进行定制。

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

• 将卡片与地图位置关联，点击卡片时在地图上显示对应标记。
• 添加对其他医生信息的动态加载和筛选。
• 集成其他基于位置的服务，如导航或路线规划。