高德猎鹰绘制轨迹笔记

老规矩,不BB,直接上代码

//这个是必须的,最好是在当前页加载的时候就先执行这个了(key值是自己账号里面去取哈.)
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=XXX"></script>

<script>
        var marker, lineArr = []; var position = [], center = [];
        var map;
        const createMap = () => {
            return new AMap.Map("container", {
                resizeEnable: true,
                center: center,
                zoom: 17
            });
        }
        const createMarker = () => {
            return new AMap.Marker({
                map: map,
                position: position,
                icon: "https://webapi.amap.com/images/car.png",   //轨迹地图上出现车的图标(运行时有车在上面移动)
                offset: new AMap.Pixel(-26, -13),
                autoRotation: true,
                angle: -90,
            });
        }
        const createPolyline = () => {
            // 绘制轨迹
            return new AMap.Polyline({
                map: map,
                path: lineArr,
                showDir: true,
                strokeColor: "#28F",  //线颜色
                // strokeOpacity: 1,     //线透明度
                strokeWeight: 6,      //线宽
                // strokeStyle: "solid"  //线样式
            });
        }

        var passedPolyline = new AMap.Polyline({
            map: map,
            // path: lineArr,
            strokeColor: "#AF5",  //线颜色
            // strokeOpacity: 1,     //线透明度
            strokeWeight: 6,      //线宽
            // strokeStyle: "solid"  //线样式
        });

		//这里我是每次都去取数据及处理好数据再返回来
		   $.ajax({
            type: "POST",
            url: "数据来源地址", //用与处理ajax的地址及函数
            data: { orderID: '@Model.orderID' },
            dataType: "json",
            success: function (result) {
            //处理数据
                var shuju = result.map(item => {
                    return item.location.split(',').map((item) => {
                        return Number(item)
                    })
                })
                lineArr = shuju;
                position = shuju[0]
                center = shuju[0]
                map = createMap();
                map.setFitView();
                marker = createMarker();
                marker.on('moving', function (e) {
                    passedPolyline.setPath(e.passedPath);
                });
                //开始绘制地图及轨迹
                createPolyline();

                //开始动画
                marker.moveAlong(lineArr, 500); //轨迹点,移动速度KM/小时
            }
        });
    </script>

直接就能用的代码,只是自己取的数据需要处理好,只需要拿到的数据里面的location的值,其他的不用了.
这么写了之后基本上就没有啥子大的问题了.数据那里也可以自己处理,取到自己想到的数据.

有啥不对的地方欢迎指正.