jq高德地图API实现路径规划及起点途径点终点设置

$(function () {init();//初始化地图plugins();//插件加载menus();
})
var map;
var placeSearch;
var lng1;
var lat1;
var lng2;
var lat2;
var driving;
var marker;
var startIcon;
var endIcon;
var markers;var activityMarker;//正在操作的marker
var myMarker;//自定义marker
var startPoint = [];
var endPoint = [];
var middlePoint = [];
var curPoint = [];
var startMarker;
var endMarker;
var viaMarker;
var middleMarker = [];
var a = 0;
var wayMarker = [];
var lnglat
//地图初始化加载
var init = function() {lnglat = new AMap.LngLat(104.066, 30.657);map = new AMap.Map('container', {resizeEnable: true,center: lnglat,zoom: 11,viewMode: '3D'//使用3D视图});
}
var plugins = function(){AMap.plugin(['AMap.ToolBar','AMap.Driving','AMap.Autocomplete','AMap.PlaceSearch'],function () {var toolbar = new AMap.ToolBar();map.addControl(toolbar);var driving = new AMap.Driving({// 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式policy: AMap.DrivingPolicy.LEAST_TIME})map.addControl(driving);// 实例化Autocompletevar autoOptions = {input:"tipinput"}var autoOptions1 = {input:"tipinput1"}autoComplete = new AMap.Autocomplete(autoOptions);autoComplete1 = new AMap.Autocomplete(autoOptions1);map.addControl(autoComplete);placeSearch = new  AMap.PlaceSearch();map.addControl(placeSearch);AMap.event.addListener(autoComplete,"select",select);//注册监听AMap.event.addListener(autoComplete1,"select",select1);//注册监听});
}
var result;
//起点地址输入框监听
function select(e){placeSearch.setCity(e.poi.adcode);lng1 = e.poi["location"]['lng'];//关键字查询lat1 = e.poi["location"]['lat'];//关键字查询
}
//终点地址输入框监听
function select1(e){placeSearch.setCity(e.poi.adcode);lng2 = e.poi["location"]['lng'];//关键字查询lat2 = e.poi["location"]['lat'];//关键字查询
}
function selectx(e){placeSearch.setCity(e.poi.adcode);lng = e.poi["location"]['lng'];//关键字查询lat = e.poi["location"]['lat'];//关键字查询var way =[];way.push(lng)way.push(lat)middlePoint.push(way)
}
//地址回显
function geocoder() {var MGeocoder;//加载地理编码插件map.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView','AMap.MapType','AMap.Geolocation'],function(){map.addControl(new AMap.ToolBar());map.addControl(new AMap.Scale());map.addControl(new AMap.OverView({isOpen:true}));map.addControl(new AMap.MapType());map.addControl(new AMap.Geolocation());});map.plugin(["AMap.Geocoder"], function () {MGeocoder = new AMap.Geocoder({radius: 1000,extensions: "all"});//返回地理编码结果AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack);//逆地理编码MGeocoder.getAddress(lnglatXY);});/*    //加点marker = new AMap.Marker({map: map,icon: new AMap.Icon({image: "https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png" ,size: new AMap.Size(58, 30),imageOffset: new AMap.Pixel(-0, -0)}),position: lnglatXY,offset: new AMap.Pixel(-5, -30)});*/// mapObj.setFitView();
}
//起点地址回显
function geocoderStart() {var MGeocoder;//加载地理编码插件map.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView','AMap.MapType','AMap.Geolocation'],function(){map.addControl(new AMap.ToolBar());map.addControl(new AMap.Scale());map.addControl(new AMap.OverView({isOpen:true}));map.addControl(new AMap.MapType());map.addControl(new AMap.Geolocation());});map.plugin(["AMap.Geocoder"], function () {MGeocoder = new AMap.Geocoder({radius: 1000,extensions: "all"});//返回地理编码结果AMap.event.addListener(MGeocoder, "complete", geocoder_Start);//逆地理编码MGeocoder.getAddress(lnglatXY);});
}
//终点地址回显
function geocoderEnd() {var MGeocoder;//加载地理编码插件map.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView','AMap.MapType','AMap.Geolocation'],function(){map.addControl(new AMap.ToolBar());map.addControl(new AMap.Scale());map.addControl(new AMap.OverView({isOpen:true}));map.addControl(new AMap.MapType());map.addControl(new AMap.Geolocation());});map.plugin(["AMap.Geocoder"], function () {MGeocoder = new AMap.Geocoder({radius: 1000,extensions: "all"});//返回地理编码结果AMap.event.addListener(MGeocoder, "complete", geocoder_End);//逆地理编码MGeocoder.getAddress(lnglatXY);});
}
//回调函数
function geocoder_CallBack(data) {var address;//返回地址描述address = data.regeocode.formattedAddress;if (a>1){var str = "input"+(a-1);document.getElementById(str).value = address;return;}//返回结果拼接输出document.getElementById("input0").value = address;}
//起点回调函数
function geocoder_Start(data) {var address;//返回地址描述address = data.regeocode.formattedAddress;//返回结果拼接输出document.getElementById("tipinput").value = address;
}
//终点回调函数
function geocoder_End(data) {var address;//返回地址描述address = data.regeocode.formattedAddress;//返回结果拼接输出document.getElementById("tipinput1").value = address;
}
//右键菜单
var menus=function () {// 创建一个 IconstartIcon = new AMap.Icon({// 图标尺寸size: new AMap.Size(25, 34),// 图标的取图地址image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',// 图标所用图片大小imageSize: new AMap.Size(135, 40),// 图标取图偏移量imageOffset: new AMap.Pixel(-9, -3)});// 将 icon 传入 markerstartMarker = new AMap.Marker({position: new AMap.LngLat(104.066, 30.657),icon: startIcon,offset: new AMap.Pixel(-13, -30)});// 创建一个 iconendIcon = new AMap.Icon({size: new AMap.Size(25, 34),image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',imageSize: new AMap.Size(135, 40),imageOffset: new AMap.Pixel(-95, -3)});// 将 icon 传入 markerendMarker = new AMap.Marker({position: new AMap.LngLat(104.066, 30.657),icon: endIcon,offset: new AMap.Pixel(-13, -30)});// 将 markers 添加到地图// map.add([viaMarker, startMarker, endMarker]);var contextMenu = new AMap.ContextMenu();  //创建菜单contextMenu.addItem("设为起点", function() {startPoint = curPoint;if(startMarker!=undefined && startMarker!=null){map.remove(startMarker);}startMarker = new AMap.Marker({position:contextMenuPositon,//activityMarker.getPosition(),icon: startIcon,offset: new AMap.Pixel(-12, -35),map: map});startMarker.pointType = '1';//起点//remove();lng1=curPoint[0];lat1=curPoint[1];lnglatXY = new AMap.LngLat(lng1, lat1);geocoderStart();}, 0);contextMenu.addItem("设为途径点", function() {middlePoint.push(curPoint);viaMarker = new AMap.Marker({position: contextMenuPositon,icon: new AMap.Icon({size: new AMap.Size(30, 47),  //图标大小image: "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png"}),offset: new AMap.Pixel(-12, -35),map: map});viaMarker.pointType = '2';//途径点lng=curPoint[0];lat=curPoint[1];lnglatXY = new AMap.LngLat(lng, lat);//remove();//_onDisplay();add_div2();geocoder();middleMarker.push(viaMarker);}, 1);contextMenu.addItem("设为终点", function(e) {endPoint = curPoint;if(endMarker!=undefined && endMarker!=null){map.remove(endMarker);}endMarker = new AMap.Marker({position: contextMenuPositon,//activityMarker.getPosition(),icon: endIcon,offset: new AMap.Pixel(-12, -35),map: map});endMarker.pointType = '3';//终点//remove();lng2=curPoint[0];lat2=curPoint[1];lnglatXY = new AMap.LngLat(lng2, lat2);geocoderEnd();pandl();}, 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);});}*///地图绑定鼠标右击事件——弹出右键菜单map.on('rightclick', function (e) {activityMarker = this;curPoint = [e.lnglat.lng,e.lnglat.lat];contextMenu.open(map, e.lnglat);contextMenuPositon = e.lnglat;});contextMenu.open(map, lnglat);//var mapClickListener = AMap.event.addListener(map, "click", _onClick);//绑定地图事件
}
//移除标记点
function remove() {map.remove(myMarker);
}
var getlng = function () {map.plugin('AMap.Geolocation', function() {geolocation = new AMap.Geolocation({enableHighAccuracy: true,//是否使用高精度定位，默认:truetimeout: 10000,          //超过10秒后停止定位，默认：无穷大buttonPosition:'RB',    //定位按钮的停靠位置buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)zoomToAccuracy: true,   //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false});map.addControl(geolocation);geolocation.getCurrentPosition();AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息});//解析定位结果function onComplete(data) {document.getElementById('status').innerHTML='定位成功'var str = [];str.push('定位结果：' + data.position);str.push('定位类别：' + data.location_type);if(data.accuracy){str.push('精度：' + data.accuracy + ' 米');}//如为IP精确定位结果则没有精度信息str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));document.getElementById('result').innerHTML = str.join('<br>');var lnglatXY = [data.position.getLng(), data.position.getLat()];//地图上所标点的坐标AMap.service('AMap.Geocoder',function() {//回调函数geocoder = new AMap.Geocoder({});geocoder.getAddress(lnglatXY, function (status, result) {if (status === 'complete' && result.info === 'OK') {//获得了有效的地址信息://即，result.regeocode.formattedAddressvar address = result.regeocode.formattedAddress;document.getElementById('address').innerHTML='详细地址：'+address;} else {//获取地址失败}});})}//解析定位错误信息function onError(data) {document.getElementById('status').innerHTML='定位失败'document.getElementById('result').innerHTML = '失败原因排查信息:'+data.message;}
}
//清除路径
function clears() {if (driving){driving.clear();}document.getElementById("tipinput").value ="";document.getElementById("tipinput1").value ="";map.remove(startMarker);map.remove(middleMarker);map.remove(endMarker);wayMarker.splice(0)middlePoint.splice(0)for (var j=0;j<= a;j++ ){var stt = "input"+j;var El= document.getElementById(stt);if (El){El.value ="";}}
}
//路径规划
function pandl () {if (driving){driving.clear();}var policy = $('#select option:selected').val();//构造路线导航类var drivingOption = {policy: policy,ferry: 1, // 是否可以使用轮渡map: map,panel: 'panel'}wayMarker=$.grep(middlePoint,function(n,i){return n;},false);driving = new AMap.Driving(drivingOption);// 根据起终点经纬度规划驾车导航路线driving.search(new AMap.LngLat(lng1,lat1), new AMap.LngLat(lng2,lat2),{waypoints:wayMarker}, function(status, result) {if (status === 'complete') {log.success('绘制驾车路线完成')} else {log.error('获取驾车数据失败：' + result)}});
}
//途径点添加与删除
var detail_div = 1;
var max = 5;
function add_div2() {if (detail_div<max){var str='<div id="details'+a +'"class="input-item">'+'<div class="input-item-prepend"><span class="input-item-text">途径点</span></div>'+'<input  id="input'+a +'"type='+'"text"/>' +'<button type="button"  id="del-btn" onclick="del_div(this)">-</button>'+'</div>';$('#form').append(str);var wap = 'input'+a;var autoOptionsx = {input: wap}autoCompletex = new AMap.Autocomplete(autoOptionsx);AMap.event.addListener(autoCompletex,"select",selectx);//注册监听detail_div++;a++;}
}
function add_div() {var e = document.getElementById("details");var div = document.createElement("div");if (detail_div<=4){div.className = "input-item";div.id = "details" + detail_div;div.innerHTML = e.innerHTML;document.getElementById("form").appendChild(div);detail_div++;}return false;
}
function del_div(obj) {$(obj).parent().remove();var s = $(obj).parent().attr("id");var ss= s.substr(7);middlePoint.splice(parseInt(ss),1,null);detail_div--;
}

<link href="${ctxPath}/static/css/plugins/jsTree/style.min.css" rel="stylesheet">
<link href="${ctxPath}/static/css/gdInfoWindow.css" rel="stylesheet">
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<style>html, body, #container {height: 100%;width: 100%;}#panel {position: fixed;background-color: white;max-height: 90%;overflow-y: auto;top: 10px;right: 10px;width: 280px;}#panel .amap-call {background-color: #009cf9;border-top-left-radius: 4px;border-top-right-radius: 4px;}#panel .amap-lib-driving {border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;overflow: hidden;}.input-card {display: flex;flex-direction: column;min-width: 0px;overflow-wrap: break-word;background-color: rgb(255, 255, 255);background-clip: border-box;max-width: 25rem;max-height: 35rem;box-shadow: rgba(114, 124, 245, 0.5) 0px 2px 6px 0px;position: fixed;bottom: 35rem;top:1rem;left: 5rem;border-width: 0px;border-radius: 0.4rem;flex: 1 1 auto;padding: 0.75rem 1.25rem;}.input-item-text {width: 5rem;text-align: justify;padding: 0.4rem 0.7rem;display: inline-block;text-justify: distribute-all-lines;text-align-last: justify;-moz-text-align-last: justify;-webkit-text-align-last: justify;-ms-flex-align: center;align-items: center;margin-bottom: 0;font-size: 1rem;font-weight: 400;line-height: 1.5;color: #495057;text-align: center;white-space: nowrap;background-color: #e9ecef;border: 1px solid #ced4da;border-radius: .25rem;border-bottom-right-radius: 0;border-top-right-radius: 0;}.amap-logo{display: none;opacity:0 !important;}.amap-copyright {opacity:0;}.amap-icon img{width: 25px;height: 34px;}.custom-input-card{width: 18rem;}.custom-input-card .btn:last-child{margin-left: 1rem;}.content-window-card{position: relative;width: 23rem;padding: 0.75rem 0 0 1.25rem;box-shadow: none;bottom: 0;left: 0;}.content-window-card p{height: 2rem;}.serach_area{position: absolute;top:15px;left: 118px;z-index: 9;}.serach_area .btn{height: 33px;}.info {float: left;margin: 0 0 0 10px;}label {width: 80px;float: left;}.detail {padding: 10px;border: 1px solid #aaccaa;}.custom-content-marker {position: relative;width: 25px;height: 34px;}.custom-content-marker img {width: 100%;height: 100%;}.custom-content-marker .close-btn {position: absolute;top: -6px;right: -8px;width: 15px;height: 15px;font-size: 12px;background: #ccc;border-radius: 50%;color: #fff;text-align: center;line-height: 15px;box-shadow: -1px 1px 1px rgba(10, 10, 10, .2);}.custom-content-marker .close-btn:hover{background: #666;}.btn{width:6rem;margin-left:2rem;}
</style><div id="container">
</div>
<div class="">
</div>
<table class="input-card" style='height: max-content;width: max-content;table-layout: fixed;'><tbody><tr><td><label style='color:grey'>路线规划</label></td></tr></tbody><tbody><tr><td><div class="input-item"><div class="input-item-prepend"><span class="input-item-text" >起点</span></div><input id='tipinput' type="text" ></div></td></tr></tbody><tbody><tr id="tr"><td id="form" ></td></tr></tbody><tbody><tr><td><div class="input-item"><div class="input-item-prepend"><span class="input-item-text">终点</span></div><input id='tipinput1'  type="text"><button type="button"  id="add-btn" onclick="add_div2()">+</button></div></td><td></td></tr></tbody><tbody><tr><td><div class="input-item"><div class="input-item-prepend"><span class="input-item-text">路线策略</span></div><select  id="select"><option value="0">最快捷模式</option><option value="1">最经济模式</option><option value="2">最短距离模式</option><option value="4">考虑实时路况</option></select></div></td></tr></tbody><tbody><tr><td><button  class="btn" onclick="pandl()">路线规划</button></td><td><button  class="btn" onclick="clears()">路线清除</button></td></tr></tbody>
</table>
<div id="panel"></div>
<script src="${ctxPath}/static/modular/monitoring/map/mapDisplays.js${jsv}"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=申请的K值&plugin=AMap.Autocomplete"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script src="//webapi.amap.com/ui/1.1/main.js"></script>
<!--引入UI组件库异步版本main-async.js（1.1版本） -->
<script src="//webapi.amap.com/ui/1.1/main-async.js"></script>

jq高德地图API实现路径规划及起点途径点终点设置相关推荐

python调用高德地图api获取路径规划，然后规划好点显示在地图上（农机路径转移）
我的博客好像跳度比较大,不少内容都涉及,但我是做ros组合导航的,其他的或者是项目设计,或者是因为兴趣,或者是随笔记下来. 无聊写来玩下的小demo,本来试图在硕士期间研究下这个课题即农机从仓库到田间 ...
高德地图WebAPI : 驾车路径规划
参考API 一个demo 获取路径规划返回结果中的两点间最短驾车距离 import java.io.BufferedReader; import java.io.BufferedReader; imp ...
android高德地图线路,独立路径规划-路线规划-开发指南-Android 导航SDK | 高德地图API...
基本介绍独立路径规划是指路径规划的结果不会自动应用于当前导航,也不会干扰当前的导航,需要手动调用API传入路径规划结果来开始导航.可用于不干扰本次导航的单独路径规划场景,比如路线预览等.适用于驾车/ ...
基于高德地图的APP路径规划开发
一.初始化一个APP项目参见我的上一篇文章:https://blog.csdn.net/QiwzDeBLOG/article/details/84701746 前期准备: 我的项目名称:AmapTe ...
java 高德地图路线规划_高德地图api之路线规划
1.引入 2.创建并初始化实例对象 const map = new AMap.Map("container") 3.创建一个导航元素,用来承载导航路线(这里不要忘了,是个坑,用的啥 ...
android高德地图api驾车路线规划,驾车路径规划-调起高德地图-示例中心-JS API 示例 | 高德地图API...
html,body,#container{ height:100%; } .btn{ position: fixed; bottom: 20px; right: 20px; background-co ...
结合奥维地图与百度地图api进行路径规划开发测试（python、HTML）
第一步:奥维地图如何得到规划路径上轨迹点的经纬度(参见我之前的博客). 第二步:各种坐标系转换,选择对应转换坐标系以及输入输出文件路径后可以直接调用(python批量转换,每次运行前清空输出文件res ...
android高德地图api驾车路线规划,规划结果 + 驾车路线绘制
html, body, #container { width: 100%; height: 100%; } 规划结果 + 驾车路线绘制 var map = new AMap.Map("con ...
android高德地图api驾车路线规划,可拖拽驾车路线规划
可拖拽的路线规划 html, body, #container { width: 100%; height: 100%; } 请拖拽路径试试 var map, route, marker; //基本地 ...

jq高德地图API实现路径规划及起点途径点终点设置

jq高德地图API实现路径规划及起点途径点终点设置相关推荐

最新文章

热门文章