高德地图实现导航功能（路线规划及详细途径路段信息），本文可以帮你轻松实现效果。

需求概述：

近日项目中需要利用地图实现导航功能及其详细的路段状况，查了各种地图api，发现高德地图比较好，相比百度地图，它某些功能不收费，以下是功能的实现步骤。

---

实现步骤：

第一步：

        首先需要注册并登录高德地图开放平台，申请密钥，这个密钥的作用就是你调用高德地图api的权限，这个后续自己保管好。（高德开放平台 | 高德地图API (amap.com)）

第二步：

        拿到密钥后，需要返回项目中安装高德地图加载器，安装命令为：npm i @amap/amap-jsapi-loader -S。安装这个库后，可以查看高德地图文档，怎么初始化一个基本的地图出来。（规划结果 + 驾车路线绘制-驾车路线规划-示例中心-JS API 2.0 示例 | 高德地图API (amap.com)）

下面可以参考我已实现的模块：（说明：这里我截图显示代码就算了，因为在该文章之前，原功能已经被加入更多内容了，以下是实现原功能时的截图）

根据以上步骤，就可以实现基本的地图展示效果了，以下是效果展示图：

第三步：

        基于以上已实现的功能，再加上两地间的导航功能。

        

以下是实现的效果图：

第四步：

        基于以上功能，继续实现详细途径路段信息的功能。

以下实现效果：

---

最后说明：

这里只是简单的功能参考，另外更多的地图功能，例如选择不同的方式来导航（步行，骑行），自定义选择路过的路段等功能可以查看高德的官方文档。如果大家觉得本文章对你有作用，请大家给个关注！