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传到后台解析保存。

js-高德地图规划路线相关推荐

高德地图规划路线，并显示该路线的坐标
重点注意: 注意:这里用的key值,是web端的,而非web服务的,注意注意!!! <!doctype html> <html><head><meta cha ...
js高德地图绘制路线并轨迹纠偏
引入下面三个js文件<script src="http://webapi.amap.com/maps?v=1.4.6&key=你所申请的key值"></s ...
Android 高德地图中路线规划绘制界面线路
Android 高德地图中路线规划绘制界面线路下面代码是根据很多的经纬度的点,绘制出直线的线路.比较死板 /*** 绘制景区的路线*/private void setRouteInfo(List&l ...
Android高德地图多路线规划----可点击选择路线
最近项目上有用到高德sdk,需求上要求多路线规划,并且可以在地图上点击选择路线.本着不想重复造轮子的驱使下(其实想偷懒),网上似乎没有例子,也可能是我找不到.最后没办法,只能自己实现. 在此做为记录, ...
vue使用高德地图导航路线失败，获取驾车数据失败：INVALID_USER_SCODE(解决方法)
高德地图使用路线导航最近做大屏项目,里面有地图定位,路线导航等方面的功能,在做路线定位是一直都是获取不到导航的路线,经过好长时间的百度看高德api文档终于找到解决方法. 解决方法添加高德地图安全密 ...
高德地图html js开发例子,vue.js高德地图实现热点图代码实例
1.在index.html引入高德地图JSAPI 2.地图dom 3.js实现 export default { data() {}, methods:{ initMap(){ let map = n ...
前端vue js 高德地图实现雷达扫描加载，借鉴百度地图等方法，采用Canvas解决雷达背景透明度问题，解决Canvas动态指针扫描造成浏览器卡顿问题
前端vue js 高德地图实现雷达扫描加载,借鉴百度地图等方法,采用Canvas解决雷达背景透明度问题,解决Canvas动态指针扫描造成浏览器卡顿问题经过3天的尝试,借鉴了好几个博客的思路,开发了一 ...
AMap JS 高德地图，修改渲染图层层级
AMap高德地图,修改渲染图层层级问题官网方法手动方法更改层级演示最后问题前端使用 AMap JS 高德地图时,覆盖物绘制线条(AMap.Polyline),会覆盖住下方的路段名称,路段 ...
高德地图——驾驶路线
高德地图--驾驶路线插件:AMap.Driving 方法一:规定路线 new AMap.Driving({map:map,panel:'panel'}).search([{keyword:起点,ci ...
uniapp H5端使用高德地图完成路线规划
本项目是H5端,APP端地图的使用方法请参考我的另一篇博客uniapp,map地图组件打包原生APP 首先到高德地图API,申请web端key 参考高德H5端教程开始写代码高德地图JS API 1.准 ...

js-高德地图规划路线

高德地图路线规划

js-高德地图规划路线相关推荐

最新文章

热门文章