高德地图API路线规划

高德地图API体验

申请Key

1. 申请高德地图账号
2. 登录后，应用管理下创建自己的应用
3. 在应用中创建自己的key值，选择web端API

初体验

完成以下操作即可显示简单的地图控件。

<!-- 为地图显示创建一个div -->
<div id="container"></div> 

<!-- 异步加载地图脚本 -->
<script type="text/javascript">
    window.init = function(){
        var map = new AMap.Map('container', {
           center:[117.000923,36.675807],	//定义打开地图时显示的坐标
           zoom:11
        });
    }
</script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&callback=init"></script>

添加插件

本次开发用到了位置坐标、车辆路线规划等功能，所以加了以下插件。视情况而定。

		//添加组件
        AMap.plugin(['AMap.ToolBar','AMap.Geolocation','AMap.Geocoder','AMap.Driving'],function(){//异步加载插件
            var toolbar = new AMap.ToolBar();				//工具条缩放
        	var Geolocation = new AMap.Geolocation();		//定位
          	//加载地图导航组件
        	var driving = new AMap.Driving({
		        map: map
		    });
        	map.addControl(toolbar);
            map.addControl(Geolocation);
            //map.on('click', showInfoClick);//地图点击事件        
        });

点击事件返回地址值

在官方API中提供了点击事件返回地点火星坐标的方法，获取其坐标之后在转换为地点位置名称。

 map.on('click', showInfoClick);//地图点击事件
 //点击事件，返回坐标值
 function showInfoClick(e){
     lnglatXY = [e.lnglat.getLng(),e.lnglat.getLat()]; //已知点坐标      
     regeocoder(lnglatXY);
 }
 //根据坐标返回地址
 function regeocoder(loc){
  	var geocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: "all"
      });       
      geocoder.getAddress(loc, function(status, result) {
          if (status === 'complete' && result.info === 'OK') {
              geocoder_CallBack(result);
          }
      });	          
      map.setFitView();
 }
 //获得地址描述信息
function geocoder_CallBack(data) {
     var address = data.regeocode.formattedAddress; //返回地址描述
     console.dir("点击位置的地址信息是" + address);
}

两点之间获取驾车导航路线

高德地图API中提供了两点之间返回驾车路径的方法。因为其返回的坐标是名称[经,纬]格式，故计算路径时应该为起始点[经,纬] – 终止点[经,纬]

关于driving.clear();方法：如果不适用clear()方法，在改变了原路线的基础上，其旧路线不会被消除。
关于返回值：

//获得驾车路线
function getDrivingMap(startXY,endXY){
	//清除上次规划路线
	if(driving){
		driving.clear();
	}
    driving.search(new AMap.LngLat(startXY[0], startXY[1]), new AMap.LngLat(endXY[0], endXY[1]), function(status, result) {
        // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
        if (status === 'complete') {
        	//成功
           	//计算时间
           	var time = 0;//秒
        	for(var i = 0; i < result.routes.length ; i++){
        		time += result.routes[i].time;
        	}
        	time = (Math.round(time/60/60*100)/100);
        	$("#times").val(time);
        	//计算距离
        	var distance = 0;
        	for(var i = 0; i < result.routes.length ; i++){
        		distance += result.routes[i].distance;
        	}
        	$("#distance").val(Math.round(distance/1000*100)/100);
        } else {
        	//失败
        	console.dir("路线规划失败!")
        }
    });
}