Leaflet 如何在宣传单张上提供开放路线服务

我可以在单张地图中使用开放路线服务api吗？我找不到工作示例来说明如何在地图上集成api键。现在我使用的是graphhopper，它的工作非常完美，但现在它限制使用最多5分。 当我试图通过开放式路由服务创建航路点时，我显示了以下错误：

uncaughttypeerror:L.Routing.openrouteservice不是构造函数

我的代码：

---

我不知道openrouteservice是否与传单传送机配合使用，但我尝试了MapBox，一切都很好。所以现在我的地图支持步行方向

普通宣传单张
正文{margin:0；padding:0；}
#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}
L.mapbox.accessToken='pk.eyj1ijoizmfywrhetiilcjijoituvhdl5ocj9.bufakidaim3ixr1boykpsq'；
var mapboxTiles=L.tileLayer（'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z} /{x}/{y}？access_令牌='+L.mapbox.accessToken{
属性：“）”，
tileSize:512，
Zoomofset:-1
});
var map=L.map（'map'））
.addLayer（mapboxTiles）
.setView（[42.3610，-71.0587]，15）；
路由控制({
路由器：L.Routing.mapbox（L.mapbox.accessToken{
简介：“地图盒/步行”，
语言:"en",，
}),
航路点：[
L.latLng（40.779625，-73.969111），
L.latLng（40.767949，-73.971855）
],
}).addTo（地图）；

这是我的HTML代码片段，用于包含地图和路由所需的内容：

<script src="scripts/maps/leaflet.js"></script> <!-- Include Leaflet JS -->
<script src="scripts/maps/leaflet-routing-machine.js"></script>  <!-- Include the Leaflet Routing Machine -->
<script src="scripts/maps/polyline.min.js"></script> <!-- for Leaflet Routing Machine -->
<script src="scripts/maps/lodash.min.js"></script> <!-- for Leaflet Routing Machine -->
<script src="scripts/maps/corslite.js"></script> <!-- for Leaflet Routing Machine -->
<script src="scripts/maps/L.Routing.OpenRouteService.js"></script>     <!-- Include the Open Route Service for Leaflet Routing Machine -->
<script src="scripts/maps/leaflet-providers.js"></script>

---

唯一的问题是开放路由服务在最新的API中使用POST请求。因此，

L.Routing.OpenRouteService.js

文件需要更新

您确实在项目中包含了

L.Routing.OpenRouteService.js

文件？我用npm安装了它，但它不起作用。我找不到另一个cdn库来尝试你是如何将其引入的？使用

import

语句？您还可以将复制到项目中的一个文件中，并在html标题中链接该文件。我现在尝试使用源代码，但它给出了相同的错误。我还包括了所有的js库-传单、路由机器，看不出有什么问题…“L.routing.OpenRouteService.js文件需要更新”-你有更新版本吗？@Tikky-当我发布时，我找不到更新版本。试试这里：

<script src="scripts/maps/leaflet.js"></script> <!-- Include Leaflet JS -->
<script src="scripts/maps/leaflet-routing-machine.js"></script>  <!-- Include the Leaflet Routing Machine -->
<script src="scripts/maps/polyline.min.js"></script> <!-- for Leaflet Routing Machine -->
<script src="scripts/maps/lodash.min.js"></script> <!-- for Leaflet Routing Machine -->
<script src="scripts/maps/corslite.js"></script> <!-- for Leaflet Routing Machine -->
<script src="scripts/maps/L.Routing.OpenRouteService.js"></script>     <!-- Include the Open Route Service for Leaflet Routing Machine -->
<script src="scripts/maps/leaflet-providers.js"></script>

        let router = (L as any).Routing.control({
            router: new (L as any).Routing.openrouteservice(orsKey),
            waypoints: [
                L.latLng(startLatitude, startLongitude),
                L.latLng(endLatitude, endLongitude)
            ],
            routeWhileDragging: false,
            show: false,
            fitSelectedRoutes: false,
            createMarker: function (i, waypoint, n) {
                return null;
            },
            lineOptions: {
                styles: [{ color: '#9f150b', opacity: 1, weight: 4 }]
            }
        });

        router.addTo(map);