lujingmap
/
index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>高德地图开放平台示例</title>
    <style type="text/css">
        #mapContainer {
            width: 100%;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="mapContainer"></div>

    <script src="https://webapi.amap.com/maps?v=1.4.15&key=4ed212053c331708e2d98e7ec5c43122"></script>
    <script>
        var map = new AMap.Map('mapContainer', {
            resizeEnable: true,
            center: [116.397428, 39.90923], // 初始化地图中心点
            zoom: 13 // 初始化地图缩放级别
        });

        AMap.plugin('AMap.Driving', function () {
            var driving = new AMap.Driving({
                map: map,
                panel: 'panel'
            });

            var waypoints = [ // 输入多个路径节点坐标
                new AMap.LngLat(116.368904, 39.913423),
                new AMap.LngLat(116.382122, 39.901176),
                new AMap.LngLat(116.387271, 39.912501)
            ];

            driving.search(waypoints, function (status, result) {
                if (status === 'complete') {
                    if (result.routes && result.routes.length) {
                        var path = result.routes[0].path;

                        // 在地图上显示路线
                        var routeLine = new AMap.Polyline({
                            path: path,
                            isOutline: true,
                            outlineColor: '#ffeeee',
                            borderWeight: 2,
                            strokeWeight: 5,
                            strokeColor: '#0088ff',
                            lineJoin: 'round'
                        });
                        map.add(routeLine);

                        // 生成kml文件
                        var kmlData = '<?xml version="1.0" encoding="UTF-8"?>\n' +
                            '<kml xmlns="http://www.opengis.net/kml/2.2">\n' +
                            '  <Document>\n' +
                            '    <Placemark>\n' +
                            '      <LineString>\n' +
                            '        <coordinates>\n';

                        for (var i = 0; i < path.length; i++) {
                            kmlData += path[i].getLng() + ',' + path[i].getLat() + '\n';
                        }

                        kmlData += '        </coordinates>\n' +
                            '      </LineString>\n' +
                            '    </Placemark>\n' +
                            '  </Document>\n' +
                            '</kml>';

                        // 提供kml文件下载
                        var downloadLink = document.createElement('a');
                        downloadLink.href = 'data:text/xml;charset=utf-8,' + encodeURIComponent(kmlData);
                        downloadLink.download = 'route.kml';
                        downloadLink.innerHTML = '下载KML文件';
                        document.body.appendChild(downloadLink);
                    }
                } else {
                    console.error('路线规划失败');
                }
            });
        });
    </script>
</body>
</html>