vue 百度地图绘制轨迹

### 使用 Vue 和百度地图 API 实现轨迹绘制 要在 Vue 项目中通过百度地图 API 实现轨迹绘制功能，可以按照以下方式完成： #### 1. 引入百度地图 API 在项目的 `index.html` 文件中引入百度地图的 JavaScript SDK。可以通过 `<script>` 标签加载在线资源或者本地文件。 ```html <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的AK"></script> ``` 此操作确保了百度地图的核心库被正确加载到页面中[^1]。 #### 2. 定义地图容器 在 HTML 中定义一个用于展示地图的 DOM 元素，通常是一个具有固定宽高的 `div`。 ```html <div id="allmap" style="width: 100%; height: 500px;"></div> ``` 该容器作为地图的主要渲染区域[^2]。 #### 3. 编写 Vue 组件逻辑 创建一个 Vue 组件来初始化地图并实现轨迹绘制的功能。以下是完整的组件代码示例： ```javascript <template> <div> <div id="allmap"></div> </div> </template> <script> export default { name: "TrajectoryMap", data() { return { map: null, points: [], // 存储轨迹点数组 }; }, mounted() { this.initMap(); this.drawTrajectory(); }, methods: { initMap() { const BMapGL = window.BMapGL; this.map = new BMapGL.Map("allmap"); this.map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); this.map.enableScrollWheelZoom(true); // 设置最后一个点居中显示 if (this.points.length > 0) { const lastPoint = this.points[this.points.length - 1]; this.map.panTo(lastPoint); } }, drawTrajectory() { const BMapGL = window.BMapGL; // 假设这是从服务器获取的一组轨迹数据 this.points = [ new BMapGL.Point(116.404, 39.915), new BMapGL.Point(116.414, 39.925), new BMapGL.Point(116.424, 39.935), ]; // 创建折线对象 const polyline = new BMapGL.Polyline(this.points, { strokeColor: "blue", // 折线颜色 strokeWeight: 5, // 折线宽度 strokeOpacity: 0.8, // 折线透明度 }); // 将折线添加至地图 this.map.addOverlay(polyline); // 自动调整视野范围以包含所有轨迹点 const bounds = new BMapGL.Bounds( this.points[0], this.points[this.points.length - 1] ); this.points.forEach((point) => bounds.extend(point)); this.map.setViewport(bounds); }, }, }; </script> <style scoped> #allmap { width: 100%; height: 500px; } </style> ``` 以上代码实现了以下几个核心功能： - 地图初始化，并设置初始中心点和缩放级别[^2]。 - 动态生成一组轨迹点，并将其存储为 `points` 数组。 - 利用百度地图提供的 `Polyline` 类型，在地图上绘制一条蓝色的轨迹线条[^3]。 - 调整地图视口 (`setViewport`) 来自动适应所有的轨迹点。 #### 4. 注册插件（可选） 如果希望更方便地管理百度地图的相关配置，可以在全局注册百度地图插件。例如，在 `main.js` 中执行如下操作： ```javascript import Vue from "vue"; import BaiduMap from "vue-baidu-map"; Vue.use(BaiduMap, { ak: "U4Bn9fW4tEtgEOtQ29cTpIBm47Ey4LCX", // 替换为您自己的 AK }); ``` 这一步并非强制需求，但如果涉及多个组件均需调用百度地图，则推荐采用这种方式简化开发流程[^3]。 --- ### 注意事项 - **API 密钥**：请务必申请属于您自己应用的有效密钥，并替换掉示例中的占位符。 - **性能优化**：当轨迹点数量较多时，建议分批次加载或启用缓存机制减少前端压力。 - **浏览器兼容性**：确认目标用户的设备支持 WebGL 版本的地图服务；如果不支持，可以选择回退至标准版本。 ---