vue3+百度地图绘制物流路径本文详细介绍 Vue 项目集成百度地图实现物流路线绘制的实操流程，涵盖 AK 创建、API

1.创建AK

引入API时需要你去创建你的密钥，那么如何创建密钥呢？我们接着向下看：点我进入百度开放平台点击上面的链接，登录百度开放平台在这里插入图片描述登录以后，点击右上角控制台，选择我的应用点击创建应用

在这里插入图片描述输入完成以后，提交就可以了，访问应用的AK就有了，接下来就可以导入API了

2.引入百度地图API文件

在你的项目目录中，找到index.html，引入百度地图API文件在这里插入图片描述复制你创建好的密钥进行替换就可以了

 <script type="text/javascript"
    src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的密钥"></script>

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>vite-lint-test</title>
</head>

<body>
  <div id="app"></div>
  <script type="text/javascript"
    src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的密钥"></script>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>

3.进入官方API接口文档

在这里插入图片描述点我进入百度地图API文档

4. 创建地图容器

创建容器设置宽高

<template>
  <div id="container" style="width: 100%; height: 500px"></div>
</template>

5.初始化地图逻辑

<template>
  <div id="container" style="width: 100%; height: 500px"></div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';

onMounted(() => {
  const map = new BMapGL.Map('container'); // 创建地图实例
  const point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
  map.centerAndZoom(point, 15);
  map.enableScrollWheelZoom(); //开启鼠标滚轮缩放
</script>

6.根据经纬度绘制路线

找到API中的出行路线规划，我们看驾车的例子就可以了在这里插入图片描述将示例代码，拿过来就可以了，前面的代码保持一致，其中p1是起始点，p2是终点

<template>
  <div id="container" style="width: 100%; height: 500px"></div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';

onMounted(() => {
  const map = new BMapGL.Map('container'); // 创建地图实例
  const point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
  map.centerAndZoom(point, 15);
  map.enableScrollWheelZoom(); //开启鼠标滚轮缩放

  map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);

  const p1 = new BMapGL.Point(113.42775362698366, 23.129152403638752);
  const p2 = new BMapGL.Point(121.611504, 31.035032);
 
  const driving = new BMapGL.DrivingRoute(map, {
    renderOptions: { map: map, autoViewport: true },
  });
  driving.search(p1, p2);
});
</script>

这样就可以绘制一条最佳路线图：在这里插入图片描述但是众所周知，物流路线是有途径点的，这个途径点的经纬度是后端人员返回给我们的数据，拿到以后就可以设置物流路线的途径点了。

7.配置途径点

假设我们拿到的途径点有南京和武汉的经纬度，那么就可以进行配置， driving.search(p1, p2)还有第三个参数，就是用来设置途径点的。看下面的代码，我们进行途径点的配置：

<template>
  <div id="container" style="width: 100%; height: 500px"></div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';

onMounted(() => {
  const map = new BMapGL.Map('container'); // 创建地图实例
  const point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
  map.centerAndZoom(point, 15);
  map.enableScrollWheelZoom(); //开启鼠标滚轮缩放

  map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);

  const p1 = new BMapGL.Point(113.42775362698366, 23.129152403638752);
  const p2 = new BMapGL.Point(121.611504, 31.035032);
  const searchOpts = {
    policy: 5, // 策略：躲避拥堵
    waypoints: [
      new BMapGL.Point(114.42659, 30.454012), //途径点1
      new BMapGL.Point(118.633415, 31.93182), //途径点2
    ], // 途经点：东单
    avoidRoad: '北二环东路', // 避让道路
  };
  const driving = new BMapGL.DrivingRoute(map, {
    renderOptions: { map: map, autoViewport: true },
  });
  driving.search(p1, p2, searchOpts); // 写上第三个参数
});
</script>

最终得到的，就是从广州到上海的物流路径，其中覆盖物与完整展示路径都是百度地图自带的，如果你要修改覆盖物，那么可以参考百度地图API进行设置，，博主这里就不进行介绍了在这里插入图片描述

文末互动时间 🌟

以上就是 Vue 项目中集成百度地图实现物流路线（含途经点）绘制的完整实操流程啦！从 AK 创建、API 引入，到地图初始化和路线规划，每一步都给出了具体代码和操作指引，跟着做应该能顺利跑通效果～不知道大家在实操过程中有没有遇到什么问题呢？比如：

AK 创建时的权限配置踩坑？
API 引入后地图无法渲染的排查？
途经点数据对接后端时的格式处理？
想要自定义路线覆盖物样式却找不到思路？

欢迎在评论区留言你的问题、实操心得，或者分享你在物流地图开发中的其他高效方案！如果觉得这篇教程对你有帮助，别忘了点赞+收藏，关注我后续还会更新更多前端地图开发的实用技巧～

另外，如果你有特定的地图功能需求（比如轨迹回放、多点标记、距离计算等），也可以在评论区告诉我，后续会针对性整理教程哦！🚀

—— 技术路上，一起踩坑一起成长！💪