高德地图车载导航的运用

<!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"/>
    <style type="text/css">
        #panel {
            position: fixed;
            background-color: white;
            max-height: 90%;
            overflow-y: auto;
            top: 10px;
            right: 10px;
            width: 280px;
        }
    </style>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=cd5b19d2a59845f96d0adec106f5081c&plugin=AMap.Driving"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
</head>
<body>
<div id="container"></div>
<div id="panel"></div>
<script type="text/javascript">
    //基本地图加载
    var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.397428, 39.90923],//地图中心点
        zoom: 13 //地图显示的缩放级别
    });
    //构造路线导航类
    var driving = new AMap.Driving({
        map: map,
        panel: "panel"
    }); 
    
    // 根据起终点经纬度规划驾车导航路线
    driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719),driveRouteResult);
  
    function driveRouteResult(status,result){

      if(status === 'complete' && result.info === 'OK'){

           console.debug("route ok");

           showRoutes(result.routes);

      }else{

           console.debug("error="+result);

      }

    }
   

   //显示结果集
   function showRoutes(routes){
     
      $(routes).each(function(index,route){
           console.log(route);//总的对象
           console.log(route.distance);//距离
           console.log(route.time);//距离

           var arrayRoute=new Array();//all points

          // console.debug("route"+index+"="+route.steps);
          
           //循环出每条路线的长度
           $(route.steps).each(function(index,step){

                 //console.debug("step"+index+"="+step.instruction+",distance="+step.distance+",path="+step.path);

                  //console.log(step.distance);//距离

                  //console.log(step.instruction);//路线

                  drawPolyline(map,step.path);

                  arrayRoute=arrayRoute.concat(step.path);

           });

           var car=addMarker(map);

           car.moveAlong(arrayRoute,500,null,true);//animation

           map.setFitView();

      });

}



//动态汽车图
function addMarker(mapObj){

      var car=new AMap.Marker({

           id:"test01",//动态效果图啦

           position:new AMap.LngLat(116.397428,39.90923),

           icon:"car1.png",

           autoRotation:true,

           map:mapObj

      });

      return car;

}

 
//画经过的路线图
function drawPolyline(mapObj,arrayLine){

      var polyline=new AMap.Polyline({

      map:mapObj,

      path:arrayLine,

      strokeColor:"#3366FF", //线颜色

      strokeOpacity:1, //线透明度

      strokeWeight:1, //线宽

      strokeStyle:"solid", //线样式

      strokeDasharray:[10,5] //补充线样式

      });

      return polyline;

}
</script>
</body>
</html>
高德地图 车载导航的运用

高德地图车载导航的运用
