石家庄做建站模板今日热点新闻排行榜
使用高德下载步行路径数据
下载入口
- 复制代码到右侧代码框（在文本最后）
- 点击运行（！！！关键步骤）
- 依次点击“拾取起点”、“拾取终点”、“规划路径”
- 界面左下角会出现保存按钮，即可保存路径数据.(推荐保存geojson数据)
5. 注意高德爬取出的数据的坐标是gcj02。不是wgs1984。注意坐标转换后再使用
<!doctype html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><title>位置经纬度 + 步行路线规划</title><style type="text/css">html,body,#container {width: 100%;height: 100%;}#panel {position: fixed;background-color: white;max-height: 90%;overflow-y: auto;top: 10px;right: 10px;width: 280px;}#panel .amap-call {background-color: #009cf9;border-top-left-radius: 4px;border-top-right-radius: 4px;}#panel .amap-lib-walking {border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;overflow: hidden;}#saveButton {position: fixed;bottom: 20px;left: 20px;padding: 10px 15px;background-color: #009cf9;color: white;border: none;border-radius: 4px;cursor: pointer;font-size: 14px;}#saveGeoJSONButton {position: fixed;bottom: 20px;left: 180px;padding: 10px 15px;background-color: #00cc66;color: white;border: none;border-radius: 4px;cursor: pointer;font-size: 14px;}#saveButton:hover, #saveGeoJSONButton:hover {opacity: 0.8;}#controlPanel {position: fixed;top: 10px;left: 10px;background-color: white;padding: 10px;border-radius: 4px;box-shadow: 0 2px 6px rgba(0,0,0,0.3);z-index: 100;}.control-button {margin: 5px 0;padding: 8px 12px;background-color: #009cf9;color: white;border: none;border-radius: 4px;cursor: pointer;width: 100%;}.control-button:hover {background-color: #0080cc;}.control-button.active {background-color: #ff6600;}.coordinates {margin-top: 10px;font-size: 12px;}</style><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /><script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.Walking"></script><script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script><script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<div id="panel"></div>
<div id="controlPanel"><button id="startPointBtn" class="control-button">拾取起点</button><button id="endPointBtn" class="control-button">拾取终点</button><button id="planRouteBtn" class="control-button" disabled>规划路线</button><div class="coordinates"><div>起点: <span id="startCoord">未设置</span></div><div>终点: <span id="endCoord">未设置</span></div></div>
</div>
<button id="saveButton" style="display:none;">保存路径数据为JSON</button>
<button id="saveGeoJSONButton" style="display:none;">保存为GeoJSON</button>
<script type="text/javascript">var map = new AMap.Map("container", {resizeEnable: true,center: [104.3903, 31.140889],//地图中心点zoom: 13 //地图显示的缩放级别});// 存储路径规划结果var routeResult = null;// 存储起点和终点var startPoint = null;var endPoint = null;var startMarker = null;var endMarker = null;// 当前模式：'start', 'end', 或 nullvar currentMode = null;// 步行导航var walking = new AMap.Walking({map: map,panel: "panel"}); // 设置点击事件map.on('click', function(e) {if (currentMode === 'start') {setStartPoint(e.lnglat);} else if (currentMode === 'end') {setEndPoint(e.lnglat);}});// 设置起点function setStartPoint(lnglat) {startPoint = [lnglat.getLng(), lnglat.getLat()];document.getElementById('startCoord').innerText = startPoint.join(', ');// 移除旧标记if (startMarker) {map.remove(startMarker);}// 添加新标记startMarker = new AMap.Marker({position: startPoint,map: map,icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',title: '起点'});// 重置模式setMode(null);// 检查是否可以规划路线checkPlanRouteButton();}// 设置终点function setEndPoint(lnglat) {endPoint = [lnglat.getLng(), lnglat.getLat()];document.getElementById('endCoord').innerText = endPoint.join(', ');// 移除旧标记if (endMarker) {map.remove(endMarker);}// 添加新标记endMarker = new AMap.Marker({position: endPoint,map: map,icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',title: '终点'});// 重置模式setMode(null);// 检查是否可以规划路线checkPlanRouteButton();}// 设置当前模式function setMode(mode) {currentMode = mode;// 更新按钮状态document.getElementById('startPointBtn').classList.remove('active');document.getElementById('endPointBtn').classList.remove('active');if (mode === 'start') {document.getElementById('startPointBtn').classList.add('active');map.setDefaultCursor('crosshair');} else if (mode === 'end') {document.getElementById('endPointBtn').classList.add('active');map.setDefaultCursor('crosshair');} else {map.setDefaultCursor('default');}}// 检查规划路线按钮状态function checkPlanRouteButton() {var planButton = document.getElementById('planRouteBtn');if (startPoint && endPoint) {planButton.disabled = false;} else {planButton.disabled = true;}}// 规划路线function planRoute() {if (!startPoint || !endPoint) {alert('请先设置起点和终点');return;}// 清除之前的路线walking.clear();// 规划新路线walking.search(startPoint, endPoint, function(status, result) {if (status === 'complete') {log.success('绘制步行路线完成');routeResult = result;document.getElementById('saveButton').style.display = 'block';document.getElementById('saveGeoJSONButton').style.display = 'block';} else {log.error('步行路线数据查询失败' + result);alert('路径规划失败，请尝试其他位置');} });}// 保存JSON数据的函数function saveRouteAsJSON() {if (!routeResult) {alert('没有可用的路径数据');return;}// 创建一个Blob对象var dataStr = JSON.stringify(routeResult, null, 2);var blob = new Blob([dataStr], {type: 'application/json'});// 创建一个下载链接var url = URL.createObjectURL(blob);var a = document.createElement('a');a.href = url;a.download = '步行路径规划结果.json';// 触发点击事件下载文件document.body.appendChild(a);a.click();// 清理setTimeout(function() {document.body.removeChild(a);window.URL.revokeObjectURL(url);}, 0);}// 将路径数据转换为GeoJSON格式function convertToGeoJSON() {if (!routeResult || !routeResult.routes || routeResult.routes.length === 0) {alert('没有可用的路径数据');return null;}var route = routeResult.routes[0]; // 获取第一条路径var features = [];// 添加起点特征features.push({"type": "Feature","geometry": {"type": "Point","coordinates": [routeResult.start.location.lng, routeResult.start.location.lat]},"properties": {"name": "起点","type": "start"}});// 添加终点特征features.push({"type": "Feature","geometry": {"type": "Point","coordinates": [routeResult.end.location.lng, routeResult.end.location.lat]},"properties": {"name": "终点","type": "end"}});// 处理每个路段for (var i = 0; i < route.steps.length; i++) {var step = route.steps[i];var coordinates = [];// 收集路段中的所有坐标点for (var j = 0; j < step.path.length; j++) {coordinates.push([step.path[j].lng, step.path[j].lat]);}// 添加路段特征features.push({"type": "Feature","geometry": {"type": "LineString","coordinates": coordinates},"properties": {"instruction": step.instruction,"road": step.road,"distance": step.distance,"time": step.time,"action": step.action,"stepIndex": i}});}// 创建完整的路径LineStringvar allCoordinates = [];route.steps.forEach(function(step) {step.path.forEach(function(point) {allCoordinates.push([point.lng, point.lat]);});});// 添加完整路径特征features.push({"type": "Feature","geometry": {"type": "LineString","coordinates": allCoordinates},"properties": {"name": "完整路径","distance": route.distance,"time": route.time,"type": "full_path"}});// 创建GeoJSON对象var geoJSON = {"type": "FeatureCollection","features": features,"properties": {"totalDistance": route.distance,"totalTime": route.time,"startPoint": [routeResult.start.location.lng, routeResult.start.location.lat],"endPoint": [routeResult.end.location.lng, routeResult.end.location.lat]}};return geoJSON;}// 保存GeoJSON数据的函数function saveRouteAsGeoJSON() {var geoJSON = convertToGeoJSON();if (!geoJSON) {return;}// 创建一个Blob对象var dataStr = JSON.stringify(geoJSON, null, 2);var blob = new Blob([dataStr], {type: 'application/geo+json'});// 创建一个下载链接var url = URL.createObjectURL(blob);var a = document.createElement('a');a.href = url;a.download = '步行路径规划结果.geojson';// 触发点击事件下载文件document.body.appendChild(a);a.click();// 清理setTimeout(function() {document.body.removeChild(a);window.URL.revokeObjectURL(url);}, 0);}// 添加按钮点击事件document.getElementById('startPointBtn').addEventListener('click', function() {setMode(currentMode === 'start' ? null : 'start');});document.getElementById('endPointBtn').addEventListener('click', function() {setMode(currentMode === 'end' ? null : 'end');});document.getElementById('planRouteBtn').addEventListener('click', planRoute);document.getElementById('saveButton').addEventListener('click', saveRouteAsJSON);document.getElementById('saveGeoJSONButton').addEventListener('click', saveRouteAsGeoJSON);
</script>
</body>
</html>