高德地圖路線規(guī)劃

功能描述：
1，畫出紅色折線，設置為禁行區(qū)域；
2，可以搜索地圖上的點
3，可以設置起點，終點，途徑點禁行規(guī)劃路線，如果經(jīng)過禁行區(qū)域則禁行提示，可以拖動更改路線，直到規(guī)劃成功。
4，規(guī)劃成功后可以查詢這條規(guī)劃的線路，并配上路書。（路書保存到后臺的數(shù)據(jù)有指令這個節(jié)點就是路書信息，這里略去）

下面給出大概的思路和部分代碼
1，加載地圖畫出禁行區(qū)域

//基本地圖加載 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}); //構(gòu)造地點查詢類//注冊監(jiān)聽，當選中某條記錄時會觸發(fā) AMap.event.addListener(autoComplete, "select", select); //回車也會觸發(fā)查詢 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);//關(guān)鍵字查詢} function search(name){//關(guān)鍵字查詢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創(chuàng)建單擊菜單，設為起點，途經(jīng)點，終點

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(); //創(chuàng)建菜單 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);//給地圖綁定單擊事件創(chuàng)建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); //刪除數(shù)組中的一個元素}if(keyTemp.J==delKey.J &&keyTemp.C==delKey.C){middlePoint.splice(i,1); }} }else{endPoint = [];endMarker = undefined;}map.remove(this); }

4,規(guī)劃路線

//點擊規(guī)劃路線 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)}}); //構(gòu)造拖拽導航類AMap.event.addListener(route, 'complete',onAddway);route.search(); //查詢導航路徑并開啟拖拽導航}); }//拖拽路線觸發(fā)事件 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("請繞開禁行區(qū)域規(guī)劃！");$('#sqlt').attr("disabled", 'disabled');return;}else{$('#sqlt').removeAttr("disabled");}}jsonRoute = JSON.stringify(way.data); }

最后將jsonRoute傳到后臺解析保存。

總結(jié)

以上是生活随笔為你收集整理的js-高德地图规划路线的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。