[项目实训博客-TravelMind途灵] 2初步界面实现及路径规划

本阶段我完成的任务包括地图及基本功能界面的实现以及初步实现了两个地点之间的路径规划。

一、地图及基本功能界面的实现

主要基于react+api来实现地图的可视化以及周围功能卡片的实现。

react项目的主要结构如下

App.js作为应用的根组件，首先定义页面的基本布局。

mapview.js主要用于集成高德地图（AMap）到前端页面，以实现可视化地图功能。

Recommendationlist.js是卡片式推荐组件 ，用于展示地点的推荐信息。

RecommendationCard则用来保存一些具体推荐的内容信息。以下是部分代码。

最终的实现结果如下：

二、初步尝试了两个地点之间的路径规划

主要通过调用高德地图API来实现出行路径规划。以下是部分代码。

最终的效果如下(以北京到天安门为例)

三、项目过程中遇到的部分问题

1.地图无法正常加载

确保 key 正确的前提下，网络无误，脚本加载完成后再进行重新初始化。

2.地图全屏样式不生效

外层 div 设置 100vh 高度，并确保无 padding/margin.