简介
leaflet-routing-machine 是一个基于 Leaflet 地图库的路线规划插件，可以快速在 web 应用中实现交通路线规划功能。本文将详细介绍如何使用 npm 安装 leaflet-routing-machine，并给出示例代码。
安装
安装前确保已经安装了 Node.js 和 npm，然后在终端输入以下命令：
npm install leaflet-routing-machine
安装完成后，就可以在项目中引入该插件了。
使用
引入 CSS 和 JS 文件
首先，在 HTML 文件中引入 CSS 和 JS 文件：
<link rel="stylesheet" href="node_modules/leaflet-routing-machine/dist/leaflet-routing-machine.css"/> <script src="node_modules/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script>
初始化地图
在 JavaScript 文件中初始化 Leaflet 地图和路线规划控件：
-- -------------------- ---- -------
-- -----
--- --- - ----------------------------- ------- ----
-- -- ------------- --
------------------------------------------------------ -
------------ -- ------------- -------------
--------------
-- ---------
--- ------ - -------------------
---------- -
-------------- ------
--------------- ------
-
--------------在上面的代码中，我们初始化了一个地图，并添加了 OpenStreetMap 图层。然后，我们创建了一个路线规划控件，并设置了起点和终点坐标。
自定义样式
如果需要自定义控件的样式，可以在 CSS 文件中修改相应的类：
.leaflet-routing-container {
background-color: #fff;
}
.leaflet-routing-alternatives-container {
margin-top: 10px;
}在上面的代码中，我们将路线规划控件的背景色改为白色，并调整了它下方备选路线容器的顶部边距。
总结
本文介绍了如何使用 npm 安装 leaflet-routing-machine，并给出了详细的示例代码。除此之外，还介绍了如何初始化地图和路线规划控件，以及如何自定义控件的样式。通过本文的学习，读者可以快速掌握该插件的使用方法，从而开发出更加丰富的交通路线规划应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/36447