当前位置：首页 > news >正文

【高德】-下载路径规划数据-无代码

news 来源：原创 2025/5/8 22:42:26

使用高德下载步行路径数据

下载入口
在这里插入图片描述

复制代码到右侧代码框（在文本最后）
点击运行（！！！关键步骤）
依次点击“拾取起点”、“拾取终点”、“规划路径”
界面左下角会出现保存按钮，即可保存路径数据.(推荐保存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', 或 null
    var 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
                }
            });
        }
        
        // 创建完整的路径LineString
        var 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>