高德地图插件问题
发布于 5 年前 作者 gangpan 9964 次浏览 来自 问答

请问小程序如何才能用高德地图的驾车规划拖拽插件编辑路线功能,规划线路有时需要调整才可用,自动生成途经点画的线路不完全合意。

另高德地图web版本身有此js插件,小程序有限制不能直接使用。

附贴html文件看拖动效果

<!doctype html>

<html>

    <head>

        <meta charset=“utf-8”>

        <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>

        <meta name=“viewport” content=“initial-scale=1.0, user-scalable=no, width=device-width”>

        <title>回放</title>

        <link rel=“stylesheet” href=“https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css” />

        <style>

            html, body, #container {

            height: 100%;

            width: 100%;

        }

        .input-card .btn{

            margin-right: 1.2rem;

            width: 9rem;

        }

        .input-card .btn:last-child{

            margin-right: 0;

        }

    </style>

    </head>

    <body>

        <div id=“container”></div>

        <div class=“input-card”>

            <h4>轨迹回放控制</h4>

            <div class=“input-item”>

                <input type=“button” class=“btn” value=“开始动画” id=“start” onclick=“startAnimation()” />

                <input type=“button” class=“btn” value=“暂停动画” id=“pause” onclick=“pauseAnimation()” />

            </div>

            <div class=“input-item”>

                <input type=“button” class=“btn” value=“继续动画” id=“resume” onclick=“resumeAnimation()” />

                <input type=“button” class=“btn” value=“停止动画” id=“stop” onclick=“stopAnimation()” />

            </div>

        </div>

        <script type=“text/javascript” src=“https://webapi.amap.com/maps?v=2.0&key=fb6715773a614b2f3bf46c7ab86a90b3”></script>

        <script type=“text/javascript” src=“https://cache.amap.com/lbs/static/addToolbar.js”></script>

        <script>

 

            var map, route, marker;

            var pathline = [];

            var lineX=[];

 

            //抽稀轨迹点数据初始化数组

            pathline.push([106.449295,29.516626]);

            pathline.push([106.457207,29.537678]);

            pathline.push([106.460197,29.537481]);

            pathline.push([106.455589,29.546011]);

            pathline.push([106.466385,29.552732]);

            pathline.push([106.499809,29.554922]);

            pathline.push([106.525574,29.548859]);

            pathline.push([106.557785,29.564367]);

            pathline.push([106.582764,29.558407]);

            //console.log(pathline);

  

            //基本地图加载

 

             map = new AMap.Map(“container”, {

                resizeEnable: true,

                center:[106.449295,29.516626],

                zoom: 11

            });

 

            //绘制初始路径

 

            map.plugin(“AMap.DragRoute”, function() {

                route = new AMap.DragRoute(map, pathline, AMap.DrivingPolicy.LEAST_FEE, {

                    polyOptions:{

                        strokeWeight:3,

                        strokeOpacity:1,

                        strokeColor:‘red’

                    },

                    midMarkerOptions : {//可缺省

                        icon: new AMap.Icon({

                            size: new AMap.Size(19, 31),//图标大小

                            imageSize:new AMap.Size(19, 31),

                            image: “https://webapi.amap.com/theme/v1.3/markers/b/mid.png

                        }),

                        offset: new AMap.Pixel(-9, -31)

                    },

                });

                //***************************************************************************************

                //构造拖拽导航类

                route.search(); //查询导航路径并开启拖拽导航

                route.on(“complete”,function()

                        {

                                //从地图上取得还原轨迹点:关键点

                        lineX=route.getRoute();

 

                        }

                        );

                route.destroy();    

                //****************************************************************************************                                                            

            });

  

            // JSAPI2.0 使用覆盖物动画必须先加载动画插件

            AMap.plugin(‘AMap.MoveAnimation’, function() {

                var marke;

                marker = new AMap.Marker({

                    map: map,

                    position: [pathline[0].lng,pathline[0].lat],

                    icon: “https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png”,

                    offset: new AMap.Pixel(-13, -26),

                });

                // 绘制轨迹

                var polyline = new AMap.Polyline({

                    map: map,

                    path: lineX,

                    showDir: true,

                    strokeColor: “#28F”, //线颜色

                    strokeOpacity: 1,     //线透明度

                    strokeWeight: 6, //线宽

                    strokeStyle: “solid”  //线样式

                });

                var passedPolyline = new AMap.Polyline({

                    map: map,

                    strokeColor: “#AF5”, //线颜色

                    strokeWeight: 6, //线宽

                });

                marker.on(‘moving’, function(e) {

                    passedPolyline.setPath(e.passedPath);

                    map.setCenter(e.target.getPosition(), true)

                });

                map.setFitView();

                window.startAnimation = function startAnimation() {

                    marker.moveAlong(lineX, {

                        // 每一段的时长

                        duration: 20, //可根据实际采集时间间隔设置

                        // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置

                        autoRotation: true,

                    });

                };

                window.pauseAnimation = function() {

                    marker.pauseMove();

                };

                window.resumeAnimation = function() {

                    marker.resumeMove();

                };

                window.stopAnimation = function() {

                    marker.stopMove();

                };

            });

        </script>

    </body>

</html>

回到顶部