基于百度地图打造“美食地图”与3D路线规划

原创已于 2025-12-16 16:43:46 修改 · 489 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#美食 #3d

于 2025-12-12 16:42:26 首次发布

从零到一：基于百度地图打造“美食地图”与3D路线规划的完整实践

项目类型：Java 项目 + 浏览器端百度地图 Web SDK
Demo 功能：美食 POI 检索、聚合标注、热力图层切换、交互筛选、路线规划、3D动态跟随
适配场景：生活服务、美食探店、商圈导航、出行规划、多端演示

数据准备与整合
通过百度地图开放平台的Place API获取餐饮POI数据，需申请开发者密钥（AK）。检索参数可设置tag=美食，并筛选评分、人均消费等字段。返回的JSON数据示例：

{
  "name": "XX餐厅",
  "location": {"lat": 39.12, "lng": 116.23},
  "address": "北京市海淀区XX路",
  "rating": 4.5,
  "price": 150
}

效果概览

启动后自动定位当前城市，侧栏筛选菜系、评分、范围，地图实时渲染美食点位。
同类别点位使用不同颜色 Marker，支持聚合簇展示。
一键切换热力图，透明度可调，点击地图热点区域自动刷新该区域美食分布。
在点位信息窗点击“路线规划”后生成路线；自动进入 3D WebGL 视图，以倾斜镜头沿路径动态播放。

技术选型

浏览器端 SDK：BMap（2D）+ BMapGL（WebGL 3D）
扩展库：MarkerClusterer（聚合）、Heatmap（热力图）、TextIconOverlay（聚合文本）
前端结构：原生 HTML/JS，轻量 CSS，无框架依赖
后端：当前 Demo 为前端直连；可扩展 Java 后端调用百度 Web 服务 API 以获取真实评分、营业状态等
路线规划与 3D 动态播放：步行/骑行/公交/自驾模式规划路线，并在 3D 视图中逐点航迹播放
MCP 配置驱动的导航：粘贴 MCP 的 segments JSON，多段路线按不同出行模式拼接并联播

核心模块

地图初始化
- 首选高精度定位，失败回落到城市定位与北京兜底
- 位置：src/map-demo.html:229–249
美食 POI 检索与标注
- 基于 BMap.LocalSearch 的 searchNearby，按菜系批量查询并生成评分标签
- 位置：src/map-demo.html:190–226
- 标注绘制：src/map-demo.html:163–180
聚合标注
- MarkerClusterer 对高密度点位聚合，统计聚合簇数量
- 位置：src/map-demo.html:213–223、183–188
热力图层
- BMapLib.HeatmapOverlay，基于点位评分权重生成绿-黄-红梯度
- 图层切换与透明度控制：src/map-demo.html:287–304
- 数据生成与绘制：src/map-demo.html:274–285
交互筛选侧栏
- 菜系芯片、评分滑块、范围选择与快捷筛选
- 位置：src/map-demo.html:50–89、70–73
路线规划（2D）
- 支持步行、骑行、公交、自驾；颜色区分不同方式
- 位置：src/map-demo.html:331–356（搜索与轨迹绘制）
- 起点可拖拽调整：src/map-demo.html:313–321
3D 动态跟随
- WebGL 视图进入与播放/暂停/退出
- 位置：src/map-demo.html:358–420
- 动画逻辑基于 2D 路线路径点，倾斜 60°，自动调整航向

关键代码片段

# 脚本引入

```html
<script src="https://api.map.baidu.com/api?v=3.0&ak=your-ak"></script>
<script src="https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
<script src="https://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script src="https://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
<script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=your-ak"></script>

2D路线规划与3D触发

planner.setSearchCompleteCallback(function(rs) {
  var plan = rs.getPlan(0);
  var route = plan.getRoute(0);
  var path = route.getPath();
  
  routePolyline = new BMap.Polyline(path, { 
    strokeColor: color,
    strokeWeight: 6,
    strokeOpacity: 0.8
  });
  
  map.addOverlay(routePolyline);
  open3DRoute(path, start, dest, mode);
});

3D播放核心

// 初始化3D地图实例
glMap = new BMapGL.Map('gl3dMap');

// 转换路径坐标为Point对象数组
glPath = path.map(p => new BMapGL.Point(p.lng, p.lat));

// 创建路径折线并设置样式
glLine = new BMapGL.Polyline(glPath, {
    strokeColor: routeColor(mode),
    strokeWeight: 8,
    strokeOpacity: 0.9
});

// 将折线添加到地图并调整视图
glMap.addOverlay(glLine);
glMap.setViewport(glPath);
glMap.setTilt(60);

// 文件位置：src/map-demo.html:365–381

3D跟随动画

glTimer = setInterval(function() {
  if (glPaused) return;
  
  i++;
  if (i >= glPath.length) {
    stop3DAnim();
    return;
  }

  const prev = glPath[i-1];
  const cur = glPath[i];
  
  glAnimMarker.setPosition(cur);
  
  const dx = cur.lng - prev.lng;
  const dy = cur.lat - prev.lat;
  const deg = Math.atan2(dy, dx) * 180 / Math.PI;
  
  glMap.setHeading(90 - deg);
  glMap.panTo(cur);
}, 60);

API/SDK调用效果与完整性

2D/3D双栈整合：在同一页面中既保留 2D 的成熟路线规划，又以 3D 展示沉浸式动态效果。
交互层完善：检索、聚合、热力、路线、3D 全链路闭环；失败兜底与库缺失容错。
扩展性：可对接百度 Web 服务 API 返回真实评分/营业状态/距离耗时，实现完整商业化落地。

技术文档与代码规范

文件与函数职责清晰，模块化组织：初始化、检索、渲染、聚合、热力、路线、3D 分层实现。
命名统一、无魔法常量、容错处理齐备（地图库未加载、定位失败、库缺失）。
前端无框架依赖，开发者易读易改；支持从 file:// 与本地服务打开，增强适配性。

Demo交互亮点

热力图交互：图层切换与透明度细调，点击热点区域即定位刷新。
侧栏设计：芯片式菜系、多种控制统一风格、可折叠按钮与平滑过渡。
3D视图：播放/暂停与退出控制，镜头倾斜与航向自动调整，增强沉浸感。

场景新颖性与实用性

美食探店：评分热区快速发现热门店铺，配合 3D 路线直观导航。
商圈运营：商圈热度与品类分布洞察，适配营销投放与门店布局分析。
本地生活：周边推荐与路线一体化，适用于外卖骑手、团购导购、城市逛吃攻略。

行业落地结合

餐饮连锁：门店竞品热力对比、路线指引、门店运营数据看板。
文旅与商场：主题美食路线、活动动线规划、不同出行方式指引。
城市服务：热门餐饮片区识别、公共交通可达性分析。

性能与兼容

聚合控件提升大数据量点位渲染效率。
3D动画按路径点位推进，60ms粒度在多数设备上流畅。
容错策略避免脚本错误造成白屏，优化用户体验路径。

可扩展路线图

接入 Web 服务 API：真实评分、营业状态、距离与耗时、营业时间段筛选。
数据持久化：后端缓存与分页加载，减少重复检索与提升响应速度。
主题样式：夜间模式、移动端抽屉式侧栏、自定义图标与贴图。
高级导航：避堵/避限行策略、3D 车头模型与速度控制。

总结

本项目将百度地图的 2D 检索与 3D 动态路线结合在一体化页面中，实现从发现—筛选—导航的闭环体验。
代码清晰、交互完整、具备扩展空间，适合快速落地到美食/生活服务/商圈导航等场景。

视频演示：

基于百度地图打造“美食地图”与3D路线规划