如何保存和显示 Mapbox 路线?
How to save and show Mapbox directions?
我正在使用 Mapbox 和 Leaflet。
我有一个创建视图,我在其中创建步行路线。
但我还需要详细视图,我可以在其中显示创建的方向。
现在我只将 originMarker 和 destinationMarker 坐标保存到数据库中;
我尝试通过这种方式显示路由:
<script>
var start = JSON.parse($('#start_field').val());
var finish = JSON.parse($('#finish_field').val());
L.mapbox.accessToken = 'qwerty';
var map = L.mapbox.map('map', 'mapbox.streets', {
zoomControl: false
}).setView([42.8580536, 74.6224754], 12);
L.Routing.control({
waypoints: [
L.latLng(start.lat, start.lng),
L.latLng(finish.lat, finish.lng)
]
}).addTo(map);
var start_marker = L.marker([start.lat, start.lng], {
draggable: false
}).addTo(map);
var finish_marker = L.marker([finish.lat, finish.lng], {
draggable: false
}).addTo(map);
</script>
但是浏览器给我一个错误:
Uncaught TypeError: Cannot read property 'control' of undefined
没有完整的代码很难回答,但我的第一个猜测是你没有加载路由插件的资产或没有以正确的顺序加载(首先是 Leaflet 脚本,然后是路由插件,反之亦然)不起作用):
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<link rel="stylesheet" href="leaflet-routing-machine.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="leaflet-routing-machine.js"></script>
我正在使用 Mapbox 和 Leaflet。 我有一个创建视图,我在其中创建步行路线。 但我还需要详细视图,我可以在其中显示创建的方向。
现在我只将 originMarker 和 destinationMarker 坐标保存到数据库中;
我尝试通过这种方式显示路由:
<script>
var start = JSON.parse($('#start_field').val());
var finish = JSON.parse($('#finish_field').val());
L.mapbox.accessToken = 'qwerty';
var map = L.mapbox.map('map', 'mapbox.streets', {
zoomControl: false
}).setView([42.8580536, 74.6224754], 12);
L.Routing.control({
waypoints: [
L.latLng(start.lat, start.lng),
L.latLng(finish.lat, finish.lng)
]
}).addTo(map);
var start_marker = L.marker([start.lat, start.lng], {
draggable: false
}).addTo(map);
var finish_marker = L.marker([finish.lat, finish.lng], {
draggable: false
}).addTo(map);
</script>
但是浏览器给我一个错误:
Uncaught TypeError: Cannot read property 'control' of undefined
没有完整的代码很难回答,但我的第一个猜测是你没有加载路由插件的资产或没有以正确的顺序加载(首先是 Leaflet 脚本,然后是路由插件,反之亦然)不起作用):
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<link rel="stylesheet" href="leaflet-routing-machine.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="leaflet-routing-machine.js"></script>