mapindex.js 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. // 初始化地图
  2. const map = L.map('map').setView([31.2304, 121.4737], 13); // 上海坐标
  3. L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  4. maxZoom: 19,
  5. attribution: '© OpenStreetMap'
  6. }).addTo(map);
  7. let markers = [];
  8. let routeLine = null;
  9. // 点击地图添加起点/终点
  10. map.on('click', async (e) => {
  11. const { lat, lng } = e.latlng;
  12. if (markers.length >= 1) {
  13. // 重置
  14. markers.forEach(m => map.removeLayer(m));
  15. markers = [];
  16. if (routeLine) {
  17. map.removeLayer(routeLine);
  18. routeLine = null;
  19. }
  20. }
  21. const marker = L.marker([lat, lng]).addTo(map);
  22. markers.push(marker);
  23. const url = `https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lng}`;
  24. const res = await fetch(url);
  25. const data = await res.json();
  26. console.log(data);
  27. marker.bindPopup(`📍 当前位置:<br>纬度:${lat}<br>经度:${lng}<br>${data.display_name}`).openPopup();
  28. console.log("选择的坐标:", lat, lng);
  29. if (markers.length === 2) {
  30. const start = markers[0].getLatLng();
  31. const end = markers[1].getLatLng();
  32. // 请求 OSRM 路线 API
  33. const url = `https://router.project-osrm.org/route/v1/driving/${start.lng},${start.lat};${end.lng},${end.lat}?overview=full&geometries=geojson`;
  34. const response = await fetch(url);
  35. const json = await response.json();
  36. if (json.code === 'Ok') {
  37. const coords = json.routes[0].geometry.coordinates.map(c => [c[1], c[0]]);
  38. routeLine = L.polyline(coords, { color: 'blue', weight: 5 }).addTo(map);
  39. map.fitBounds(routeLine.getBounds());
  40. const distance = (json.routes[0].distance / 1000).toFixed(2);
  41. const duration = (json.routes[0].duration / 60).toFixed(1);
  42. alert(`路线规划完成:\n距离:${distance} 公里\n预计时间:${duration} 分钟`);
  43. } else {
  44. alert('路线规划失败');
  45. }
  46. }
  47. });
  48. document.addEventListener('UniAppJSBridgeReady', function() {
  49. function initMap() {
  50. uni.postMessage({
  51. data: {
  52. mark:"initMap"
  53. }
  54. });
  55. }
  56. window.initMap = initMap;
  57. });