高德地图js api模拟驾车路线动画效果代码

代码语言:html

所属分类:其他

代码描述:高德地图js api模拟驾车路线动画效果代码

代码标签: api 模拟 驾车 路线 动画 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>

    <style>
        #container {
            width: 1000px;
            height: 600px;
        }
    </style>
    <script>
        // 扩大作用域
        var map = null;
        var timer = null;
        var markerList = null;
        var index = 0;

        // 异步加载地图策略
        var initMap = function () {
            // 初始化地图
            map = new AMap.Map("container", {
                center: [115.379028, 39.865042],
                zoom: 18,
                viewMode: "3D",
                pitch: 75
            })

            // 异步加载插件,此时不需要在JS文件后边引入对应的插件,因为现在是异步加载的。
            AMap.plugin("AMap.Driving", function () {
                // 实例化对象
                var driving = new AMap.Driving({
                    // 驾车路线规划策略,LEAST_TIME为最快捷模式。
                    policy: AMap.DrivingPolicy.LEAST_FEE,
                    map: map
                });

                // 起始和结束坐标位置
                var startLngLat = [115.379028, 39.865042];
                var endLngLat = [116.427281, 39.903719];

                // 开始规划
                driving.search(startLngLat, endLngLat, function (status, result) {
                    console.log(status);
                    console.log(result);
                    if (result.info === "OK") {
                        console.log(result.routes[0].steps);
                        alert("全程大约:" + (parseFloat(result.routes[0].distance) / 1000) + "公里,确认3秒后开始模拟车辆行车轨迹。");
                        markerList = GetMarkers(result);
                        console.log(markerList);
                        // 3秒后开始模拟车辆行车轨迹
                        window.setTimeout('map.setZoom(16);timer = window.setInterval("AddMarkerToMap(markerList[index++])", 50);', 3000);
                    } else {
                        alert("对不起,系统出现了问题");
                    }
                });
            });
        }

        // 定时函数
        var marker = null;
        function AddMarkerToMa.........完整代码请登录后点击上方下载按钮下载查看

网友评论0