高德地图JavaScript API-路径规划——基于amap-js_V1.3
2015-08-01 21:26
696 查看
高德地图JavaScript API-路径规划
——基于amap-js_V1.3
sf2gis@163.com
2015年7月31日
（这URL也不一定什么时候就会变，早上的内容和下午都不一样，说不准……）
AMap.service(["AMap.Driving"],function(){
vardrive=new AMap.Driving();
var ptStart=new AMap.LngLat(116.379018,39.865026);
var ptEnd=new AMap.LngLat(116.321139, 39.896028);
drive.search(ptStart,ptEnd,driveRouteResult);
});
}
<html>
<head>
<metaname="viewport" content="initial-scale=1.0,user-scalable=no" >
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Hello,world</title>
<styletype="text/css">
html { height:100% }
body { height:100%; margin:0px; padding:0px }
#container { height:100% }
</style>
<scripttype="text/javascript"src="amap.js"></script>
<scripttype="text/javascript"src="jquery-1.11.1.min.js"></script>
<scripttype="text/javascript">
var mapObj=null;
$(document).ready(function(){
mapObj = new AMap.Map("container"); // 创建地图实例
var point = new AMap.LngLat(116.404, 39.915); // 创建点坐标，这是个火星坐标，真实坐标对应的火星坐标为116.410251,39.916412
mapObj.setZoomAndCenter(11,point);
//test
driving();
});
//test driving
function driving(){
AMap.service(["AMap.Driving"],function(){
var drive=newAMap.Driving();
var ptStart=newAMap.LngLat(116.379018,39.865026);
var ptEnd=newAMap.LngLat(116.321139, 39.896028);
drive.search(ptStart,ptEnd,driveRouteResult);
});
}
functiondriveRouteResult(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){
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);
drawPolyline(mapObj,step.path);
arrayRoute=arrayRoute.concat(step.path);
});
var car=addMarker(mapObj);
console.debug("all pts="+arrayRoute);
car.moveAlong(arrayRoute,500,null,true);//animation
mapObj.setFitView();
});
}
function addMarker(mapObj){
var car=new AMap.Marker({
id:"test01",
position:new AMap.LngLat(116.397428,39.90923),
icon:"images/car.png",
autoRotation:true,
map:mapObj
});
return car;
}
functiondrawPolyline(mapObj,arrayLine){
var polyline=new AMap.Polyline({
map:mapObj,
path:arrayLine,
strokeColor:"#3366FF", //线颜色
strokeOpacity:1, //线透明度
strokeWeight:5, //线宽
strokeStyle:"solid", //线样式
strokeDasharray:[10,5] //补充线样式
});
return polyline;
}
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
<html>
<head>
<metaname="viewport" content="initial-scale=1.0,user-scalable=no" >
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Hello,world</title>
<styletype="text/css">
html { height:100% }
body { height:100%; margin:0px; padding:0px }
#container { height:100% }
</style>
<scripttype="text/javascript"src="amap.js"></script>
<scripttype="text/javascript"src="jquery-1.11.1.min.js"></script>
<scripttype="text/javascript">
var mapObj=null;
$(document).ready(function(){
mapObj = new AMap.Map("container"); // 创建地图实例
var point = new AMap.LngLat(116.404, 39.915); // 创建点坐标，这是个火星坐标，真实坐标对应的火星坐标为116.410251,39.916412
mapObj.setZoomAndCenter(11,point);
//test
driving();
});
//test driving
function driving(){
AMap.service(["AMap.Transfer"],function(){
var drive=new AMap.Transfer({
city: '010',
policy: AMap.TransferPolicy.LEAST_TIME
});
var ptStart=new AMap.LngLat(116.379028,39.865042);
var ptEnd=new AMap.LngLat(116.427281,39.903719);
drive.search(ptStart,ptEnd,routeResult);
});
}
functionrouteResult(status,result){
if(status === 'complete' && result.info === 'OK'){
console.debug("route ok,start="+result.start+",end="+result.end+",taxi_cost="+result.taxi_cost);
console.debug(result);
showRoutes(result.plans);
}else{
console.debug("error="+result);
}
}
function showRoutes(plans){
$(plans).each(function(index,route){
console.debug("route"+index+"="+route.path);
//show route
drawPolyline(mapObj,route.path);
var car=addMarker(mapObj);
console.debug("all pts="+route.path);
car.moveAlong(route.path,500,null,true);//animation
mapObj.setFitView();
return false;
});
}
function addMarker(mapObj){
var car=new AMap.Marker({
id:"test01",
position:new AMap.LngLat(116.397428,39.90923),
icon:"images/car.png",
autoRotation:true,
map:mapObj
});
return car;
}
functiondrawPolyline(mapObj,arrayLine){
var polyline=new AMap.Polyline({
map:mapObj,
path:arrayLine,
strokeColor:"#3366FF", //线颜色
strokeOpacity:1, //线透明度
strokeWeight:5, //线宽
strokeStyle:"solid", //线样式
strokeDasharray:[10,5] //补充线样式
});
return polyline;
}
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
<html>
<head>
<metaname="viewport" content="initial-scale=1.0,user-scalable=no" >
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Hello,world</title>
<styletype="text/css">
html { height:100% }
body { height:100%; margin:0px; padding:0px }
#container { height:100% }
</style>
<scripttype="text/javascript"src="amap.js"></script>
<scripttype="text/javascript"src="jquery-1.11.1.min.js"></script>
<scripttype="text/javascript">
var mapObj=null;
$(document).ready(function(){
mapObj = new AMap.Map("container"); // 创建地图实例
var point = new AMap.LngLat(116.404, 39.915); // 创建点坐标，这是个火星坐标，真实坐标对应的火星坐标为116.410251,39.916412
mapObj.setZoomAndCenter(11,point);
//test
driving();
});
//test driving
function driving(){
AMap.service(["AMap.Walking"],function(){
var drive=new AMap.Walking();
var ptStart=new AMap.LngLat(116.480355,39.989783);
var ptEnd=new AMap.LngLat(116.469766,39.998731);
drive.search(ptStart,ptEnd,routeResult);
});
}
functionrouteResult(status,result){
if(status === 'complete' && result.info.toUpperCase()=== 'OK'){
console.debug("route ok");
console.debug(result);
showRoutes(result.routes);
}else{
console.debug("error="+result);
}
}
function showRoutes(routes){
$(routes).each(function(index,route){
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);
drawPolyline(mapObj,step.path);
arrayRoute=arrayRoute.concat(step.path);
});
var car=addMarker(mapObj);
console.debug("all pts="+arrayRoute);
car.moveAlong(arrayRoute,500,null,true);//animation
mapObj.setFitView();
});
}
function addMarker(mapObj){
var car=new AMap.Marker({
id:"test01",
position:new AMap.LngLat(116.397428,39.90923),
icon:"images/car.png",
autoRotation:true,
map:mapObj
});
return car;
}
functiondrawPolyline(mapObj,arrayLine){
var polyline=new AMap.Polyline({
map:mapObj,
path:arrayLine,
strokeColor:"#3366FF", //线颜色
strokeOpacity:1, //线透明度
strokeWeight:5, //线宽
strokeStyle:"solid", //线样式
strokeDasharray:[10,5] //补充线样式
});
return polyline;
}
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
——基于amap-js_V1.3
sf2gis@163.com
2015年7月31日
1 路径规划：驾车、公交和步行。
注意：高德将一些服务作为服务插件集成到当前map中（搞的越来越复杂了……）。1.1 驾车路径规划：根据起止点返回路线。AMap.service（【”AMap.Driving”】）。
详见：http://lbs.amap.com/api/javascript-api/reference/search_plugin/#m_AMap.Driving（这URL也不一定什么时候就会变，早上的内容和下午都不一样，说不准……）
1.1.1规划：根据起止点请求规划，drive.search(start,end,callbackFunc)。
function driving(){AMap.service(["AMap.Driving"],function(){
vardrive=new AMap.Driving();
var ptStart=new AMap.LngLat(116.379018,39.865026);
var ptEnd=new AMap.LngLat(116.321139, 39.896028);
drive.search(ptStart,ptEnd,driveRouteResult);
});
}
1.1.2规划结果：规划信息info,起点origin,终点destination,路线数组routes。
1.1.2.1 路线数组routes：路线包含距离distance，策略policy，路段steps，时间time，收费距离tolls_distance，费用tolls。
1.1.2.2 路段step包括路段的坐标对信息path（就是LngLat数组）及其它辅助信息。
1.1.3示例
<!DOCTYPE HTML><html>
<head>
<metaname="viewport" content="initial-scale=1.0,user-scalable=no" >
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Hello,world</title>
<styletype="text/css">
html { height:100% }
body { height:100%; margin:0px; padding:0px }
#container { height:100% }
</style>
<scripttype="text/javascript"src="amap.js"></script>
<scripttype="text/javascript"src="jquery-1.11.1.min.js"></script>
<scripttype="text/javascript">
var mapObj=null;
$(document).ready(function(){
mapObj = new AMap.Map("container"); // 创建地图实例
var point = new AMap.LngLat(116.404, 39.915); // 创建点坐标，这是个火星坐标，真实坐标对应的火星坐标为116.410251,39.916412
mapObj.setZoomAndCenter(11,point);
//test
driving();
});
//test driving
function driving(){
AMap.service(["AMap.Driving"],function(){
var drive=newAMap.Driving();
var ptStart=newAMap.LngLat(116.379018,39.865026);
var ptEnd=newAMap.LngLat(116.321139, 39.896028);
drive.search(ptStart,ptEnd,driveRouteResult);
});
}
functiondriveRouteResult(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){
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);
drawPolyline(mapObj,step.path);
arrayRoute=arrayRoute.concat(step.path);
});
var car=addMarker(mapObj);
console.debug("all pts="+arrayRoute);
car.moveAlong(arrayRoute,500,null,true);//animation
mapObj.setFitView();
});
}
function addMarker(mapObj){
var car=new AMap.Marker({
id:"test01",
position:new AMap.LngLat(116.397428,39.90923),
icon:"images/car.png",
autoRotation:true,
map:mapObj
});
return car;
}
functiondrawPolyline(mapObj,arrayLine){
var polyline=new AMap.Polyline({
map:mapObj,
path:arrayLine,
strokeColor:"#3366FF", //线颜色
strokeOpacity:1, //线透明度
strokeWeight:5, //线宽
strokeStyle:"solid", //线样式
strokeDasharray:[10,5] //补充线样式
});
return polyline;
}
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
1.2 公交路径规划：根据起止点返回路线。AMap.service（【”AMap.Transfer”】）。
方式与驾车相似，但是多了公交换乘和步行的路径。1.2.1规划：根据起止点请求规划，search(start,end,callbackFunc)。
1.2.2规划结果：规划信息info,起点origin,终点destination,路线数组plans。
1.2.2.1 路线数组plans：包括所经点的坐标对path，各个路段信息segments。
1.2.2.2 路段segments:包括各个路段，各路段由于不同的类型（步行，地铁等）包含的属性不同（到底想弄的多乱？？？？）。
1.2.3示例
<!DOCTYPE HTML><html>
<head>
<metaname="viewport" content="initial-scale=1.0,user-scalable=no" >
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Hello,world</title>
<styletype="text/css">
html { height:100% }
body { height:100%; margin:0px; padding:0px }
#container { height:100% }
</style>
<scripttype="text/javascript"src="amap.js"></script>
<scripttype="text/javascript"src="jquery-1.11.1.min.js"></script>
<scripttype="text/javascript">
var mapObj=null;
$(document).ready(function(){
mapObj = new AMap.Map("container"); // 创建地图实例
var point = new AMap.LngLat(116.404, 39.915); // 创建点坐标，这是个火星坐标，真实坐标对应的火星坐标为116.410251,39.916412
mapObj.setZoomAndCenter(11,point);
//test
driving();
});
//test driving
function driving(){
AMap.service(["AMap.Transfer"],function(){
var drive=new AMap.Transfer({
city: '010',
policy: AMap.TransferPolicy.LEAST_TIME
});
var ptStart=new AMap.LngLat(116.379028,39.865042);
var ptEnd=new AMap.LngLat(116.427281,39.903719);
drive.search(ptStart,ptEnd,routeResult);
});
}
functionrouteResult(status,result){
if(status === 'complete' && result.info === 'OK'){
console.debug("route ok,start="+result.start+",end="+result.end+",taxi_cost="+result.taxi_cost);
console.debug(result);
showRoutes(result.plans);
}else{
console.debug("error="+result);
}
}
function showRoutes(plans){
$(plans).each(function(index,route){
console.debug("route"+index+"="+route.path);
//show route
drawPolyline(mapObj,route.path);
var car=addMarker(mapObj);
console.debug("all pts="+route.path);
car.moveAlong(route.path,500,null,true);//animation
mapObj.setFitView();
return false;
});
}
function addMarker(mapObj){
var car=new AMap.Marker({
id:"test01",
position:new AMap.LngLat(116.397428,39.90923),
icon:"images/car.png",
autoRotation:true,
map:mapObj
});
return car;
}
functiondrawPolyline(mapObj,arrayLine){
var polyline=new AMap.Polyline({
map:mapObj,
path:arrayLine,
strokeColor:"#3366FF", //线颜色
strokeOpacity:1, //线透明度
strokeWeight:5, //线宽
strokeStyle:"solid", //线样式
strokeDasharray:[10,5] //补充线样式
});
return polyline;
}
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
1.3 步行路径规划：根据起止点返回路线。AMap.service（【”AMap.Walking”】）。
方式与驾车相似，但是这里的返回结果中成功时是小写的ok（其它的都是大写……高德就是有国际范，大小写不同哦，SB）。1.3.1规划：根据起止点请求规划，search(start,end,callbackFunc)。
1.3.2规划结果：规划信息info,起点origin,终点destination,路线数组routes。
1.3.2.1 路线数组routes：包含路段steps等。
1.3.2.2 路段step包括路段的坐标对信息path（就是LngLat数组）及其它辅助信息。
1.3.3示例
<!DOCTYPE HTML><html>
<head>
<metaname="viewport" content="initial-scale=1.0,user-scalable=no" >
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Hello,world</title>
<styletype="text/css">
html { height:100% }
body { height:100%; margin:0px; padding:0px }
#container { height:100% }
</style>
<scripttype="text/javascript"src="amap.js"></script>
<scripttype="text/javascript"src="jquery-1.11.1.min.js"></script>
<scripttype="text/javascript">
var mapObj=null;
$(document).ready(function(){
mapObj = new AMap.Map("container"); // 创建地图实例
var point = new AMap.LngLat(116.404, 39.915); // 创建点坐标，这是个火星坐标，真实坐标对应的火星坐标为116.410251,39.916412
mapObj.setZoomAndCenter(11,point);
//test
driving();
});
//test driving
function driving(){
AMap.service(["AMap.Walking"],function(){
var drive=new AMap.Walking();
var ptStart=new AMap.LngLat(116.480355,39.989783);
var ptEnd=new AMap.LngLat(116.469766,39.998731);
drive.search(ptStart,ptEnd,routeResult);
});
}
functionrouteResult(status,result){
if(status === 'complete' && result.info.toUpperCase()=== 'OK'){
console.debug("route ok");
console.debug(result);
showRoutes(result.routes);
}else{
console.debug("error="+result);
}
}
function showRoutes(routes){
$(routes).each(function(index,route){
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);
drawPolyline(mapObj,step.path);
arrayRoute=arrayRoute.concat(step.path);
});
var car=addMarker(mapObj);
console.debug("all pts="+arrayRoute);
car.moveAlong(arrayRoute,500,null,true);//animation
mapObj.setFitView();
});
}
function addMarker(mapObj){
var car=new AMap.Marker({
id:"test01",
position:new AMap.LngLat(116.397428,39.90923),
icon:"images/car.png",
autoRotation:true,
map:mapObj
});
return car;
}
functiondrawPolyline(mapObj,arrayLine){
var polyline=new AMap.Polyline({
map:mapObj,
path:arrayLine,
strokeColor:"#3366FF", //线颜色
strokeOpacity:1, //线透明度
strokeWeight:5, //线宽
strokeStyle:"solid", //线样式
strokeDasharray:[10,5] //补充线样式
});
return polyline;
}
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 服务器与客户端数据交互 (json)
- JSTL标签的使用示例
- js自定义函数总结
- poco JSON 的使用
- JavaScript中的parseInt和Number函数
- javascript是什么？
- 如何编写一个JSON解析器
- 从JavaScript 数组去重看兼容性问题，及性能优化（摘自玉伯博客）
- SugarCRM之在EditViews中调用js
- 关于Javascript变量类型的一些注意点
- JS鼠标滚轮事件详解
- ajax跨域访问-jsonp报错：Uncaught SyntaxError: Unexpected token":"or"<"or"{"
- js上传文件
- 用JavaScript验证表单
- JSON拾遗
- JSON的解析
- JavaScript学习要点（十三）
- js预加载/延迟加载
- 浅谈JavaScript中setInterval和setTimeout的使用问题
- 访问WEB-INF下的jsp页面以及利用session访问webroot下的页面