leaflet中引入Leaflet Routing Machine的教程

要在leaflet中引入Leaflet Routing Machine，可以按照以下步骤进行操作：

首先，确保已经引入了Leaflet和Leaflet Routing Machine的库文件。可以通过在HTML文件中添加以下代码来引入它们：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-routing-machine@3.3.4/dist/leaflet-routing-machine.css" />

<script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-routing-machine@3.3.4/dist/leaflet-routing-machine.js"></script>

创建一个包含地图的容器。可以在HTML文件中添加一个具有唯一ID的<div>元素，作为地图的容器。例如：

<div id="map" style="height: 400px;"></div>

在JavaScript代码中，创建地图实例并设置初始视图。在这个实例中，你可以设置地图的中心点和缩放级别。例如：

var map = L.map('map').setView([51.505, -0.09], 13);

添加一个基础图层到地图上。你可以使用Leaflet提供的基础图层或者其他第三方提供的图层。例如，添加一个OpenStreetMap图层：

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'
}).addTo(map);

创建一个Leaflet Routing Machine实例，并将其添加到地图上。例如：

L.Routing.control({
  waypoints: [
    L.latLng(51.5, -0.1),
    L.latLng(51.51, -0.12)
  ],
  routeWhileDragging: true
}).addTo(map);

在这个例子中，我们创建了一个包含两个路点的路线。你可以根据需要添加更多的路点。

运行代码并在浏览器中查看结果。你应该能够在地图上看到一条连接两个路点的路线。

这就是在leaflet中引入Leaflet Routing Machine的基本教程。你可以根据自己的需求进行进一步的定制和调整