使用腾讯地图驾车规划路线-蒲公英云

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

末蓝、 2022-05-24 06:46 894阅读 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>