<!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>
时间： 2024-10-10 17:57:34