使用腾讯地图驾车规划路线

末蓝、 2022-05-24 06:46 767阅读 0赞

<!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <link href="https://v3.bootcss.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
        <title>基本地图展示</title>
    </head>
    <body>
    <p>通过腾讯地图规划驾车路线，并展示运动轨迹</p>
    
    输入要规划路线的地址：<input type="text" style="width: 63%;" 
     value="http://apis.map.qq.com/ws/direction/v1/walking/?from=39.915285,116.403857&to=39.915285,116.803857&key=腾讯地图key" />
    
    <button class="btn btn-xs btn-primary">查看路线</button>
    <input type="button" class="btn btn-xs btn-primary hidden" value="开始动画" id="start"/>
    <input type="button" class="btn btn-xs btn-primary hidden" value="暂停动画" id="pause"/>
    <input type="button" class="btn btn-xs btn-primary hidden" value="继续动画" id="resume"/>
    <input type="button" class="btn btn-xs btn-primary hidden" value="停止动画" id="stop"/>
    <br><br>
    <div id="container" style="height: 500px; width: 80%"></div>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://webapi.amap.com/maps?v=1.4.6&key=高德地图key"></script>
    <script>
        $(function() {
            var map = new AMap.Map('container', {
                resizeEnable: true,
                zoom:11,
                center: [116.397428, 39.90923]
            });
            $('button').click(function(){
                map.clearMap();
                var urlAll = $('input').val();
    
                //获取参数
                var arr = urlAll.split('?');
                var url = arr[0];
                var canshu = arr[1].split('&');
                var dataParam = {
                    output : 'jsonp'
                };
                for(var i=0; i<canshu.length; i++) {
                    var can = canshu[i].split('=');
                    if(can[0] == 'from') {
                        dataParam.from = can[1];
                    }
                    if(can[0] == 'to') {
                        dataParam.to = can[1];
                    }
                    if(can[0] == 'waypoints') {
                        dataParam.waypoints = can[1];
                    }
                    if(can[0] == 'key') {
                        dataParam.key = can[1];
                    }
                }
    
                //始点
                var kaishi = dataParam.from;
                var kaishiArr = kaishi.split(',');
                new AMap.Marker({
                    map: map,
                    position: [kaishiArr[1], kaishiArr[0]],
                    icon: "http://webapi.amap.com/theme/v1.3/markers/n/start.png"
                });
    
                //终点
                var zhong = dataParam.to;
                var zhongArr = zhong.split(',');
                new AMap.Marker({
                    map: map,
                    position: [zhongArr[1], zhongArr[0]],
                    icon: "http://webapi.amap.com/theme/v1.3/markers/n/end.png"
                });
    
                $.ajax({
                    url: url,
                    data : dataParam,
                    dataType: 'jsonp',
                    success: function (data) {
                        var luxiain = data.result.routes[0];
                        console.log(luxiain);
                        var coors = luxiain.polyline;//点集合
                        //转经纬度集合
                        for (var i = 2; i < coors.length; i++) {
                            coors[i] = coors[i - 2] + coors[i] / 1000000;
                        }
                        var lineNew = [];
                        for (var i = 0; i < coors.length; i=i+2) {
                            lineNew[i/2] = [coors[i+1], coors[i]];
                        }
                        var polyline = new AMap.Polyline({
                            path: lineNew,
                            strokeOpacity: 1,
                            strokeWeight: 3,
                            strokeStyle: "solid",
                            strokeDasharray: [10, 5]
                        });
                        polyline.setMap(map);
                        $('#start').removeClass('hidden');
    
                        //开始动画
                        marker = new AMap.Marker({
                            map: map,
                            position: [kaishiArr[1], kaishiArr[0]],
                            icon: "http://webapi.amap.com/images/car.png",
                            offset: new AMap.Pixel(-26, -13),
                            autoRotation: true });
                        var passedPolyline = new AMap.Polyline({
                            map: map,
                            strokeColor: "#F00",  //线颜色
                            strokeWeight: 3      //线宽
                        });
                        marker.on('moving',function(e){
                            passedPolyline.setPath(e.passedPath);
                        })
                        map.setFitView();
                        AMap.event.addDomListener(document.getElementById('start'), 'click', function() {
                            marker.moveAlong(lineNew, 1500);
                            $('#pause').removeClass('hidden');
                            $('#resume').removeClass('hidden');
                            $('#stop').removeClass('hidden');
                        }, false);
                        AMap.event.addDomListener(document.getElementById('pause'), 'click', function() {
                            marker.pauseMove();
                        }, false);
                        AMap.event.addDomListener(document.getElementById('resume'), 'click', function() {
                            marker.resumeMove();
                        }, false);
                        AMap.event.addDomListener(document.getElementById('stop'), 'click', function() {
                            marker.stopMove();
                        }, false);
    
                    },
                    error: function(error) {
                        console.log('jsonp');
                        console.log(error);
                    }
                });
                //缩放显示所有点
                map.setFitView();
            });
    
        });
    </script>
    </body>
    </html>

地图展示：

![20180522183444392][]

[20180522183444392]: /images/20220524/c88d9252fcb14e9182ffcd16e8079527.png