使用 Leaflet Routing Machine 在两个标记之间找到路径答案

【问题标题】：Find the way between two markers with Leaflet Routing Machine使用 Leaflet Routing Machine 在两个标记之间找到路径
【发布时间】：2016-11-25 00:32:31
【问题描述】：

我正在尝试使用传单在我的地图上的标记之间找到一条路线。我使用了那个代码：

L.Routing.control({
waypoints: [
L.latLng(36.9009882, 10.3009531),
L.latLng(36.9922751, 10.1255164)
]}).addTo(map);

但我的地图上没有新内容。有什么遗漏吗？我该怎么办？

【问题讨论】：

我用你的代码创建了一个演示，它运行良好：plnkr.co/edit/2S5ZW7BNb9B9vzOJ5FBF?p=preview -- 你能分享更多你的代码吗？也许您还有其他干扰它的插件？您使用的是哪个版本的 L.Routing 和 Leaflet？
它现在也适用于我，问题出在插件上..

标签： javascript leaflet openstreetmap

【解决方案1】：

1 - 您是否将 (Leaflet Routing Machine) 包含在您的应用程序中？ 2-确保你的地图变量是（地图）试试这个简单的例子

欲了解更多信息，请访问此页面 https://www.liedman.net/leaflet-routing-machine/

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

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1
    }).addTo(mymap);

    L.marker([51.5, -0.09]).addTo(mymap)
        .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

    L.marker([53.5, -0.09]).addTo(mymap)
        .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();


// route the way leafet machine as I said AI


L.Routing.control({
   waypoints:   [
   L.latLng(51.5, -0.09),
   L.latLng(53.5, -0.09)
   ]
}).addTo(mymap);

<!DOCTYPE html>
<html>
<head>
    
    <title>Quick Start - Leaflet</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css" />
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>
    
</head>
<body>



<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>





</script>



</body>
</html>

【讨论】：