[项目实训博客-TravelMind途灵] 9 智能路径规划功能

一、功能简介

智能路径规划功能允许用户从推荐卡片中选择多个景点/酒店/美食，自动规划线路生成多点路线，并在地图上高亮显示所有途经点和完整路径，用户可随时增删目的地。

二、核心代码实现

1. 后端接口

该接口将前端传来的所有目的地拆分为起点、终点和途经点，拼接成高德API要求的格式。

2.1推荐卡片栏与行程点管理

用户点击Add按钮时，系统会自动判断是否已存在该点，避免重复添加。并通过地理编码接口自动补全经纬度，提升数据兼容性，用户可随时移除已选行程点，并进行对应的报错处理。

2.2 推荐卡片 Add/已加 按钮

通过按钮Add来添加用户感兴趣的景点，并可以通过再次点击来撤销选择。

2.3 路径规划请求与地图绘制

2.4 地图多点路径绘制

将用户选择的景点进行路径规划并展示路径，以及实现对途径用户选择的景点进行标记。

三、效果展示

四、遇到的难点

1. 横向滚动与鼠标滑轮

横向滚动在将选项移到上面的同时，会有时出现失灵的现象。

wheel 事件始终绑定在推荐卡片区域，推荐卡片栏每次展开和隐藏都初始化这个绑定事件。

2. 标记点在地图上显示时会携带其背景

对原始图像进行处理，将其处理为不带背景的图像后再引用这个图像作为标记点。