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