<!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>