基于Vue3的百度地图组件

应用场景介绍

本代码适用于需要在Vue3项目中使用百度地图功能的场景，如展示地图、在地图上标记位置、规划路线等。它可以方便地集成到Vue3项目中，无需额外配置或依赖。

代码基本功能介绍

该代码提供了以下基本功能：

• 加载百度地图，设置中心点和缩放级别
• 在地图上标记多个位置，并显示信息窗口
• 提供调用司机按钮，方便用户联系司机

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

加载百度地图

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

首先，需要导入百度地图组件。

const ak = "cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc";

获取百度地图的ak（密钥）。

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

在模板中使用<BMap>组件，设置ak、中心点和缩放级别。

标记多个位置

<template #default="{ map, BMapGL }">
  <div ref="mapContainer" :style="{ height: '100%' }" />
</template>

使用<template>插槽，在<BMap>组件内部创建地图容器。

onMounted(() => {
  const map = new BMapGL.Map(mapContainer.value);
  map.centerAndZoom(new BMapGL.Point(116.40388, 39.915119), 13);
});

在onMounted钩子中，创建百度地图实例并设置中心点和缩放级别。

调用司机按钮

<van-button type="primary" round>Call the driver</van-button>

在模板中添加一个调用司机按钮。

总结与展望

开发经验与收获

开发这段代码的过程让我深入了解了Vue3中使用百度地图组件的方法。我学会了如何加载地图、标记位置和添加交互功能。

未来拓展与优化

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

• 添加路线规划功能，允许用户规划从当前位置到目的地的路线
• 集成语音导航功能，为用户提供语音导航服务
• 优化地图加载速度，提高用户体验