提问人：Samuel Gachuhi 提问时间：10/30/2023 更新时间：10/30/2023 访问量：16
无法在 Leaflet 中显示用户位置和地理编码搜索位置之间的路径图层
Unable to display route layer between user location and geocode search location in Leaflet
问：
我想创建一个简单的 Leaflet 应用程序，该应用程序可以缩放到用户位置，也可以缩放到地理编码搜索栏中定义的位置。其次，应用程序应该显示两个位置之间的最短路线，就像谷歌地图的功能一样。我已经设法实现了第一个目标，部分实现了第二个目标。但是，即使我遵循了 Leaflet Routing Machine 应用程序中的示例，两个位置（用户搜索和地理编码搜索）之间的最短路径也不会呈现在地图上。我知道使用 routing.machine 插件简单地渲染路由是：
L.Routing.control({
waypoints: [
L.latLng(lat, lon), // User's location
L.latLng(geocodedLat, geocodedLon) // Geocoded location
]
}).addTo(map);
这最初没有奏效，并要求 ChatGPT 提供差异的解决方案，并添加了其他 if 语句。这是我的代码：
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
<!-- Mobile view -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- Mobile view -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<!-- Leaflet search -->
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<!-- Leaflet routing machine css -->
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css" />
<!-- Leaflet routing -->
<link rel="stylesheet" href="./LeafletControlRouteToAddress-master/dist/v1/LeafletControlRoutingtoaddress.css" />
<!-- Leaflet routing machine -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.0.3/leaflet-routing-machine.css" />
<!-- Leaflet routing machine -->
<!-- Leaflet routing -->
<!-- Leaflet routing machine js -->
<!-- <script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>
<script src="D:\gachuhi\vs_code\geolocation\routing\Leaflet.LocationShare-master\Leaflet.LocationShare.js"></script> -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<script src="./LeafletControlRouteToAddress-master/dist/v1/LeafletControlRoutingtoaddress.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.0.3/leaflet-routing-machine.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map" style="width:100%; height: 100vh"></div>
<script>
var map = L.map('map').setView([-1.297221, 36.829702], 11);
mapLink = "<a href='http://openstreetmap.org'>OpenStreetMap</a>";
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: 'Leaflet © ' + mapLink + ', contribution', maxZoom: 18 }).addTo(map);
L.Control.geocoder().addTo(map);
map.locate({ setView: true, maxZoom: 16 });
var lat, lon; // Variables to store user location
var geocodedLat, geocodedLon; // Variables to store geocoded location
function onLocationFound(e) {
lat = e.latlng.lat;
lon = e.latlng.lng;
var radius = e.accuracy;
L.marker(e.latlng).addTo(map)
.bindPopup("You are within " + radius + " meters from this point").openPopup();
L.circle(e.latlng, radius).addTo(map);
// Create a routing control after obtaining both locations
if (geocodedLat !== undefined && geocodedLon !== undefined) {
createRoutingControl();
}
}
map.on('locationfound', onLocationFound);
function onLocationError(e) {
alert(e.message);
}
map.on('locationerror', onLocationError);
map.on('geocoded', function(e) {
geocodedLat = e.latlng.lat;
geocodedLon = e.latlng.lng;
// Create a routing control after obtaining both locations
if (lat !== undefined && lon !== undefined) {
createRoutingControl();
}
});
function createRoutingControl() {
L.Routing.control({
waypoints: [
L.latLng(lat, lon), // User's location
L.latLng(geocodedLat, geocodedLon) // Geocoded location
]
}).addTo(map);
}
</script>
</body>
</html>
如何在地图上显示最短路径图层？
答： 暂无答案
评论