js-高德地图规划路线

高德地图路线规划

功能描述： 1，画出红色折线，设置为禁行区域； 2，可以搜索地图上的点 3，可以设置起点，终点，途径点禁行规划路线，如果经过禁行区域则禁行提示，可以拖动更改路线，直到规划成功。 4，规划成功后可以查询这条规划的线路，并配上路书。（路书保存到后台的数据有指令这个节点就是路书信息，这里略去）

下面给出大概的思路和部分代码 1，加载地图画出禁行区域

//基本地图加载 map = new AMap.Map("container", { resizeEnable: true, center: [120.295655, 31.569756],//地图中心点 zoom: 13 //地图显示的缩放级别 }); var jxroutes = ""; <c:forEach var="map" items="${mapList}"> 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); </c:forEach>

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<pois.length;i+=1){ var marker = new AMap.Marker({ content:'<div class="marker" >'+'　'+'</div>', position:pois[i].location, map:map, }); marker.poi = pois[i]; markers.push(marker); } for(var i=0;i<markers.length;i+=1){ markers[i].on('rightclick', function(e) { activityMarker = this; curPoint = [e.lnglat.lng,e.lnglat.lat]; contextMenu.open(map, e.lnglat); }); } map.setFitView(); }); }

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

var map, route, markers; var activityMarker;//正在操作的marker var myMarker;//自定义marker var 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); //给地图绑定单击事件创建Marker var _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<middleMarker.length;i++) { var keyTemp = middleMarker[i].getPosition(); if(keyTemp===delKey) { middleMarker.splice(i,1); //删除数组中的一个元素 } if(keyTemp.J==delKey.J &&keyTemp.C==delKey.C){ middlePoint.splice(i,1); } } }else{ endPoint = []; endMarker = undefined; } map.remove(this); }

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<middlePoint.length;i++){ myPath.push(middlePoint[i]); } } myPath.push(endPoint); map.remove(startMarker); map.remove(endMarker); for(var i=0;i<middleMarker.length;i++) { map.remove(middleMarker[i]); } map.plugin("AMap.DragRoute", function() { route = new AMap.DragRoute(map, myPath, AMap.DrivingPolicy.LEAST_FEE, { startMarkerOptions:{ icon: new AMap.Icon({ size: new AMap.Size(30, 47), //图标大小 image: "<%=basePath%>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<steps.length;i+=1){ if(steps[i].road!="" && jxroutes.indexOf(steps[i].road)>0){ alert("请绕开禁行区域规划！"); $('#sqlt').attr("disabled", 'disabled'); return; }else{ $('#sqlt').removeAttr("disabled"); } } jsonRoute = JSON.stringify(way.data); }

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