出租车实时定位卡片

应用场景

该卡片用于展示出租车实时定位信息，包括司机信息、行程详情、支付信息等，方便用户了解行程进度和相关信息。

基本功能

• 实时显示出租车位置和行驶轨迹
• 展示司机信息，包括头像、姓名、评分等
• 提供行程详情，包括出发地、目的地、距离、预计到达时间等
• 显示支付信息，包括总金额、支付方式等
• 提供发送小费和取消行程等操作按钮

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

1. 初始化地图

<BMap :ak="ak" center="116.40388,39.915119" zoom="13" />

• 通过 <BMap> 组件初始化百度地图，并设置地图中心点和缩放级别。

2. 显示司机信息

<div class="flex items-center space-x-4">
  <a-avatar size="large" src="https://source.unsplash.com/random/50x50" />
  <div class="font-semibold text-gray-900">John Doe</div>
</div>

• 使用 <a-avatar> 和 <div> 组件展示司机头像和姓名。

3. 展示行程详情

<div class="flex items-center justify-between">
  <div class="text-lg font-semibold text-gray-900">Your taxi is on the way</div>
  <div class="text-sm text-gray-500">5.3km</div>
</div>
<div class="mt-4">
  <div class="flex items-center space-x-4">
    <div class="text-sm text-gray-500">
      <span class="font-semibold">From:</span>
      <span>Sky Zone Trampoline Park</span>
    </div>
    <div class="text-sm text-gray-500">
      <span class="font-semibold">To:</span>
      <span>Doral Park</span>
    </div>
  </div>
  <div class="mt-2">
    <div class="text-sm text-gray-500">
      <span class="font-semibold">Distance:</span>
      <span>5.3km</span>
    </div>
  </div>
  <div class="mt-2">
    <div class="text-sm text-gray-500">
      <span class="font-semibold">Estimated Time:</span>
      <span>15 mins</span>
    </div>
  </div>
</div>

• 使用 <div> 和 <span> 组件展示行程标题、出发地、目的地、距离和预计到达时间。

4. 展示支付信息

<div class="flex items-center justify-between">
  <div class="text-base font-semibold text-gray-900">Payment</div>
  <div class="text-sm text-gray-500">
    <a-tag color="green">Paid</a>
  </div>
</div>
<div class="mt-2">
  <div class="flex items-center space-x-4">
    <div class="text-sm text-gray-500">
      <span class="font-semibold">Total:</span>
      <span>$10.00</span>
    </div>
    <div class="text-sm text-gray-500">
      <span class="font-semibold">Payment Method:</span>
      <span>Credit Card</span>
    </div>
  </div>
</div>

• 使用 <div> 和 <a-tag> 组件展示支付状态、总金额和支付方式。

5. 提供操作按钮

<div class="border-t border-gray-200">
  <div class="flex items-center justify-between px-4 py-4">
    <a-button type="primary">Send Tip</a>
    <a-button type="primary">Cancel Ride</a>
  </div>
</div>

• 使用 <a-button> 组件提供发送小费和取消行程的操作按钮。

总结与展望

在开发这段代码的过程中，我学到了如何使用 Vue.js、Ant Design Vue 和 Baidu Map GL 来构建一个交互式且信息丰富的卡片。未来，该卡片功能可以进一步拓展和优化，例如：

• 集成实时交通数据，显示更准确的预计到达时间
• 允许用户跟踪行程历史记录
• 提供司机评价和反馈功能