本文共 6138 字，大约阅读时间需要 20 分钟。

高德地图路线规划

功能描述：

1，画出红色折线，设置为禁行区域；

2，可以搜索地图上的点

3，可以设置起点，终点，途径点禁行规划路线，如果经过禁行区域则禁行提示，可以拖动更改路线，直到规划成功。

4，规划成功后可以查询这条规划的线路，并配上路书。（路书保存到后台的数据有指令这个节点就是路书信息，这里略去）

下面给出大概的思路和部分代码

//基本地图加载map = new AMap.Map("container", {    resizeEnable: true,    center: [120.295655, 31.569756],//地图中心点    zoom: 13 //地图显示的缩放级别});var jxroutes = "";
   
          jxroutes += '${map.NAME}';    var lineArr = eval('${map.POINTS}');    var polyline = new AMap.Polyline({    path: lineArr,          //设置线覆盖物路径    //strokeColor: "#3366FF", //线颜色    strokeColor: "#FF0000", //线颜色    strokeOpacity: 1,       //线透明度    strokeWeight: 8,        //线宽    strokeStyle: "solid",   //线样式    strokeDasharray: [10, 5] //补充线样式});polyline.setMap(map); 
   

2，输入提示后查询

//输入提示var autoOptions1 = {     city: "无锡",      input: "tipinput1" };var autoComplete = new AMap.Autocomplete(autoOptions1);     var placeSearch = new AMap.PlaceSearch({    city: "无锡", //城市    map: map  });  //构造地点查询类  //注册监听，当选中某条记录时会触发AMap.event.addListener(autoComplete, "select", select);//回车也会触发查询function EnterPress(e){
    //传入 event       var e = e || window.event;       if(e.keyCode == 13){              search(document.getElementById("tipinput1").value);    }  }function select(e) {
                    placeSearch.setCity(e.poi.adcode);     search(e.poi.name);//关键字查询 }   function search(name){
       //关键字查询    placeSearch.search(name,function(status,data){
           if(status!=='complete')return;        var pois = data.poiList.pois;        markers = [];        for(var i=0;i
   
    '+'　'+'',                  position:pois[i].location,                  map:map,            });            marker.poi = pois[i];            markers.push(marker);    }    for(var i=0;i
   

3,单击生成Marker，右键Maker创建单击菜单，设为起点，途经点，终点

var map, route, markers;var activityMarker;//正在操作的markervar myMarker;//自定义markervar startPoint = [];var endPoint = [];var middlePoint = [];var curPoint = [];var startMarker;var endMarker;var middleMarker = [];var contextMenu = new AMap.ContextMenu();  //创建菜单contextMenu.addItem("设为起点", function() {
       startPoint = curPoint;    if(startMarker!=undefined && startMarker!=null){        map.remove(startMarker);    }    startMarker = new AMap.Marker({        position: activityMarker.getPosition(),        icon: new AMap.Icon({                        size: new AMap.Size(30, 47),  //图标大小            image: "<%=basePath%>images/q_point.png"        }),        offset: new AMap.Pixel(-12, -35),        map: map    });    startMarker.pointType = '1';//起点    startMarker.on('dblclick',_ondblclick);}, 0);contextMenu.addItem("设为途径点", function() {
       middlePoint.push(curPoint);    var tmp = new AMap.Marker({        position: activityMarker.getPosition(),        icon: new AMap.Icon({                        size: new AMap.Size(30, 47),  //图标大小            image: "<%=basePath%>images/j_point.png"        }),        offset: new AMap.Pixel(-12, -35),        map: map    });    tmp.pointType = '2';//途径点    tmp.on('dblclick',_ondblclick);    middleMarker.push(tmp);}, 1);contextMenu.addItem("设为终点", function() {
       endPoint = curPoint;    if(endMarker!=undefined && endMarker!=null){        map.remove(endMarker);    }    endMarker = new AMap.Marker({        position: activityMarker.getPosition(),        icon: new AMap.Icon({                        size: new AMap.Size(30, 47),  //图标大小            image: "<%=basePath%>images/z_point.png"        }),        offset: new AMap.Pixel(-12, -35),        map: map    });    endMarker.pointType = '3';//终点    endMarker.on('dblclick',_ondblclick);}, 2);//给地图绑定单击事件创建Markervar _onClick = function(e) {
       if(myMarker!=undefined)        map.remove(myMarker); //如果地图上已存在一个自定义的Marker则删除    myMarker = new AMap.Marker({        position: e.lnglat,        map: map    })    //给自定义的Marker绑定事件-邮件菜单    myMarker.on('rightclick', function(e) {
           activityMarker = this;        curPoint = [e.lnglat.lng,e.lnglat.lat];        contextMenu.open(map, e.lnglat);    });}var mapClickListener = AMap.event.addListener(map, "click", _onClick);//绑定地图事件//双击后删除改点var _ondblclick  = function(e) {
       if(this.pointType=='1'){        startPoint = [];        startMarker = undefined;     }else if(this.pointType=='2'){        var delKey = this.getPosition();          for(var i=0;i

4,规划路线

//点击规划路线function setroute(){
                  if(route){       route.destroy();   }    /* if(route!=undefined)        route.destroy(); */    if(startPoint.length>0 && endPoint.length>0){        $('#ghlx').attr("disabled", 'disabled');        dragRouting();    }else{        //alert("请设置好起点和终点！");    }} //绘制初始路径 function dragRouting(){
        if(myMarker!=undefined)            map.remove(myMarker);     AMap.event.removeListener(mapClickListener);//绑定地图事件   jsonRoute = "";   var myPath = [];   myPath.push(startPoint);   if(middlePoint.length>0){    for(var i=0;i
   
    images/q_point.png"                        }),                        offset: new AMap.Pixel(-12, -35)                    },                    midMarkerOptions:{                        icon: new AMap.Icon({                                        size: new AMap.Size(30, 47),  //图标大小                            image: "<%=basePath%>images/j_point.png"                        }),                        offset: new AMap.Pixel(-12, -35)                    },                    endMarkerOptions:{                        icon: new AMap.Icon({                                        size: new AMap.Size(30, 47),  //图标大小                            image: "<%=basePath%>images/z_point.png"                        }),                        offset: new AMap.Pixel(-12, -35)                    }                });         //构造拖拽导航类        AMap.event.addListener(route, 'complete',onAddway);        route.search(); //查询导航路径并开启拖拽导航    });  } //拖拽路线触发事件var jsonRoute = "";function onAddway(way){
      var steps = way.data.routes[0].steps;  for(var i=0;i
    
     0){          alert("请绕开禁行区域规划！");         $('#sqlt').attr("disabled", 'disabled');          return;      }else{         $('#sqlt').removeAttr("disabled");      }  }  jsonRoute = JSON.stringify(way.data);}
    
   

最后将jsonRoute传到后台解析保存。