|
- <!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="http://cache.amap.com/lbs/static/main1119.css"/>
- <script src="http://webapi.amap.com/maps?v=1.4.5&key=6202c32e3dccbecd6d7251d9f396db30&plugin=AMap.PolyEditor,AMap.CircleEditor,AMap.MouseTool,AMap.ToolBar"></script>
- <script type="text/javascript" src="http://139.224.44.115:8010/Resource/js/jquery-2.0.0.min.js"></script>
- <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
- </head>
- <body>
- <div id="container"></div>
- <div class="button-group">
- <input type="button" class="button" value="开始动画" id="start"/>
- <input type="button" class="button" value="暂停动画" id="pause"/>
- <input type="button" class="button" value="继续动画" id="resume"/>
- <input type="button" class="button" value="停止动画" id="stop"/>
- <input type="button" class="button" value="卡车中心位置" id="adjustment"/>
- <input type="button" class="button" value="定时器移动卡车中心位置" id="timer"/>
- </div>
- <script>
- var marker, lineArr = [];
-
- var map = new AMap.Map("container", {
- resizeEnable: true,
- center: [115.397428, 38.90923],
- zoom: 18
- });
- //卡车图片
- var truck = "http://139.224.44.115:8010/Resource/images/truck.png";
- //起始位置图片
- var start = "http://139.224.44.115:8010/Resource/images/icons/startAddr.png";
- //结束位置图片
- var end = "http://139.224.44.115:8010/Resource/images/icons/EndAddr.png";
-
- var images = truck;
-
- marker = new AMap.Marker({
- map: map,
- position: [115.397428, 38.90923],
- icon: new AMap.Icon({
- size: new AMap.Size(50, 50), //图标大小
- image: truck
- }) ,
- offset: new AMap.Pixel(-26, -13),
- autoRotation: false//图片是否自动旋转
- });
-
- //设置起点地图设置一个起点图标
- var startPosition = [115.397428, 38.90923];
- //设置终点地图设置一个终点图标
- var endPosition = [117.397428, 40.90923];
-
- markerStart = new AMap.Marker({
- position: startPosition,
- icon: start,
- offset: new AMap.Pixel(-25, -30)
- });
- markerEnd = new AMap.Marker({
- position: endPosition,
- icon: end,
- offset: new AMap.Pixel(-25, -30)
- });
- markerStart.setMap(map);
- markerEnd.setMap(map);
-
- //假设当前位置的经纬度
- //var lngX = 116.397428, latY = 39.90923;
- //lineArr.push([lngX, latY]);
- //从数据库中获取当前位置之前的所有经纬度的数组
- var lineArr = [
- [115.397428, 38.90923],
- [116.397428, 39.90923],
- [117.397428, 40.90923]
- ];
-
- // 绘制轨迹
- var polyline = new AMap.Polyline({
- map: map,
- path: lineArr,
- strokeColor: "#00A", //线颜色
- // strokeOpacity: 1, //线透明度
- strokeWeight: 3, //线宽
- // strokeStyle: "solid" //线样式
- });
- var passedPolyline = new AMap.Polyline({
- map: map,
- // path: lineArr,
- strokeColor: "#F00", //线颜色
- // strokeOpacity: 1, //线透明度
- strokeWeight: 3, //线宽
- // strokeStyle: "solid" //线样式
- });
-
- marker.on('moving',function(e){
- passedPolyline.setPath(e.passedPath);
- })
- //map.setFitView();//不要这句话就默认为map定义的zoom等级,不然就根据路线长度定义zoom等级
-
- //需要设置中心点实时改变,不然会很难看,如果固定zoom的等级设定为最大数字的话。
-
- AMap.event.addDomListener(document.getElementById('start'), 'click', function() {
- marker.moveAlong(lineArr, 500);
- }, 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);
- AMap.event.addDomListener(document.getElementById('adjustment'), 'click', function() {
- //marker.getPosition();//获取卡车当前经纬度
- var markerPosition =marker.getPosition();
- map.panTo(markerPosition);//地图中心点平移至指定点位置
- }, false);
- AMap.event.addDomListener(document.getElementById('timer'), 'click', function() {
- var timerArr = [];
- for(var i = 0;i<lineArr.length;i++){
- timerArr.push(lineArr[i]);
- var timer=window.setInterval(function(){
- var markerPosition =marker.getPosition();
- map.panTo(markerPosition);
- },10000); //定时器
- }
- marker.moveAlong(timerArr, 500);
-
- //地图中心点平移至指定点位置
- var timer=window.setInterval(function(){
- var markerPosition =marker.getPosition();
- map.panTo(markerPosition);
- },1000); //定时器
-
- }, false);
-
-
- </script>
- </body>
- </html>
复制代码
|
|