三维导航进展-0516

1.模型加载

image-20210516195925863

加载了南门,J6,C餐厅,风雨操场。大致位置正确。后续可以把模型全部加上

2.导航界面

image-20210516200917905

采用下拉框的形式,选取起点,终点。后续可以根据需求增加

3.导航数据处理

 var arrlist = [
            ["山东科技大学J1号楼",120.132139,36.007682],
            ["山东科技大学北门",120.12955,36.014133],
            ["山东科技大学南门",120.131272,36.005882],
            ["山东科技大学J2号楼",120.129919,36.007265],
         ……
            
        ]
        console.log(arrlist);
   

        $("#baidu").click(function () {
            let qidian = $("#qidian").val()
            let qidiannum = getNum(qidian)
            let zhongdian = $("#zhongdian").val()
            let zhongdiannum = getNum(zhongdian);
            console.log(arrlist);
            let arr;
            let coorArr = [];
            $.ajax({
                // url: "https://restapi.amap.com/v3/direction/driving?origin=116.45925,39.910031&destination=116.587922,40.081577&output=json&key=350fafc77adcf3cb0e3d22bb4de012f0",
                url: "https://restapi.amap.com/v3/direction/walking?origin="+arrlist[qidiannum][1]+","+arrlist[qidiannum][2]+"&destination="+arrlist[zhongdiannum][1]+","+arrlist[zhongdiannum][2]+"&output=json&key=350fafc77adcf3cb0e3d22bb4de012f0",
                type: "GET",
                async: false,//将异步设置为同步
                success: function (data) {
        
                    console.log(data);
                    arr = data.route.paths[0].steps
                    console.log(data.route.paths[0].steps);
                    console.log(arr);
                    for (i of arr) {
                        coorArr.push(i.polyline)
                    }
                    console.log(coorArr);
                    debugger
    
                },
                error: function (e) {
                    console.log('请求失败');
                }
            });

获取页面中起点和终点的值,通过高德地图API获取模拟导航的路径经纬度

image-20210516201428616

4.后续,模拟导航动画处理

posted @ 2021-05-16 20:16  zcbj588  阅读(81)  评论(0)    收藏  举报