高德地图 JS API示例->其他LBS服务->轨迹纠偏->驾车轨迹纠偏

<!doctype html>
<html lang="en" >
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/> 
    <style type="text/css">
      #container,html,body{
        height: 100%;
      }
      .color{
          width:5rem;
          height:0.6rem;
          display:inline-block;
          margin:0 1rem;
      }
      .info{
          min-width:10rem;
      }
    </style>
    <title>驾车轨迹纠偏</title>
  </head>
  <body>
    <div id="container" tabindex="0"></div>
    <div class="info">
        纠偏前:<div class='color' style='background-color:red'></div><br>
        纠偏后:<div class='color' style='background-color:#0091ea'></div>
    </div>
    <script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.GraspRoad"></script>
    <script type="text/javascript">
        var map = new AMap.Map('container', {
              resizeEnable: true
        });
        var graspRoad;
        var pathParam = [
        {"x":116.478928,"y":39.997761,"sp":19,"ag":0, "tm":1478031031},
        {"x":116.478907,"y":39.998422,"sp":10,"ag":0, "tm":2},
        {"x":116.479384,"y":39.998546,"sp":10,"ag":110,"tm":3},
        {"x":116.481053,"y":39.998204,"sp":10,"ag":120,"tm":4},
        {"x":116.481793,"y":39.997868,"sp":10,"ag":120,"tm":5},
        {"x":116.482898,"y":39.998217,"sp":10,"ag":30, "tm":6},
        {"x":116.483789,"y":39.999063,"sp":10,"ag":30, "tm":7},
        {"x":116.484674,"y":39.999844,"sp":10,"ag":30, "tm":8}]

        var path1 = [];
        for(var i=0;i<pathParam.length;i+=1){
          path1.push([pathParam[i].x,pathParam[i].y])
        }
        var oldLine = new AMap.Polyline({
          path:path1,
          strokeWeight:8,
          strokeOpacity:1,
          strokeColor:'red'
        })
        map.add(oldLine)
        if(!graspRoad) {
            graspRoad = new AMap.GraspRoad()
        }
        graspRoad.driving(pathParam,function(error,result){
          if(!error){
            var path2 = [];
            var newPath = result.data.points;
            for(var i =0;i<newPath.length;i+=1){
              path2.push([newPath[i].x,newPath[i].y])
            }
            var newLine = new AMap.Polyline({
              path:path2,
              strokeWeight:8,
              strokeOpacity:0.8,
              strokeColor:'#0091ea',
              showDir:true
            })
            map.add(newLine)
            map.setFitView()
          }
        })
    </script>
  </body>
</html>
1 1 投票
文章评分