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