基于百度地图打造“美食地图”与3D路线规划-洪萨配资

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

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

效果概览

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

技术选型

浏览器端 SDK：BMap（2D）+ BMapGL（WebGL 3D）
扩展库：MarkerClusterer（聚合）、Heatmap（热力图）、TextIconOverlay（聚合文本）
前端结构：原生 HTML/JS，轻量 CSS，无框架依赖
后端：当前 Demo 为前端直连；可扩展 Java 后端调用百度 Web 服务 API 以获取真实评分、营业状态等

核心模块

地图初始化
- 首选高精度定位，失败回落到城市定位与北京兜底
- 位置：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调用效果与完整性