ganzf
/
openStreetmap


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
							<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>OpenStreetMap 路线规划</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="./js/lib/common.js"></script>
<style>
  html, body, #map {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
</style>
</head>
<body>
<div id="map" ></div>
</body>
<script type="text/javascript" src="./js/lib/uniwebviewsdk.js"></script>
<script>
  // 初始化地图
  let state = 0;
  state = getQueryVariable('shstate');
  let dlat=getQueryVariable('dlat');
  let dlng=getQueryVariable('dlng');
  
  const map = L.map('map').setView([dlat, dlng], 13); // 上海坐标
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; OpenStreetMap'
  }).addTo(map);

  let markers = [];
  let routeLine = null;
  
  // 点击地图添加起点/终点
  map.on('click', async (e) => {
      const { lat, lng } = e.latlng;
      if (markers.length >= 1) {
          // 重置
          markers.forEach(m => map.removeLayer(m));
          markers = [];
          if (routeLine) {
              map.removeLayer(routeLine);
              routeLine = null;
          }
      }
      const marker = L.marker([lat, lng]).addTo(map);
      markers.push(marker);
	  
	  
	const url = `https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lng}`;
	const res = await fetch(url);
	const data = await res.json();
	
	if(state!=0){
		marker.bindPopup(`📍 当前位置：<br>纬度：${lat}<br>经度：${lng}<br>${data.display_name}`).openPopup();
	}
      
      console.log("选择的坐标：", lat, lng);
	  
	  uni.postMessage({
	      data: {
	          data:`${lat};${lng}`, // 回传
	  		type:88
	      },
	  });
	  
	  

      if (markers.length === 2) {
          const start = markers[0].getLatLng();
          const end = markers[1].getLatLng();

          // 请求 OSRM 路线 API
          const url = `https://router.project-osrm.org/route/v1/driving/${start.lng},${start.lat};${end.lng},${end.lat}?overview=full&geometries=geojson`;

          const response = await fetch(url);
          const json = await response.json();

          if (json.code === 'Ok') {
              const coords = json.routes[0].geometry.coordinates.map(c => [c[1], c[0]]);
              routeLine = L.polyline(coords, { color: 'blue', weight: 5 }).addTo(map);
              map.fitBounds(routeLine.getBounds());

              const distance = (json.routes[0].distance / 1000).toFixed(2);
              const duration = (json.routes[0].duration / 60).toFixed(1);
              alert(`路线规划完成：\n距离：${distance} 公里\n预计时间：${duration} 分钟`);
          } else {
              alert('路线规划失败');
          }
      }
  });
  
  function showAddrMark (obj) {
	  if (markers.length >= 1) {
	      // 重置
	      markers.forEach(m => map.removeLayer(m));
	      markers = [];
	      if (routeLine) {
	          map.removeLayer(routeLine);
	          routeLine = null;
	      }
	  }
	  const lat=obj.payload.lat;
	  const lng = obj.payload.lon;
	  const marker = L.marker([lat, lng]).addTo(map);
	  markers.push(marker);
  };

</script>

</html>