高德地图——驾驶路线

高德地图——驾驶路线
插件：AMap.Driving

方法一：规定路线

new AMap.Driving({map:map,panel:'panel'}).search([{keyword:起点,city:'北京'},{keyword:终点,city:'北京'}],function(status,data){console.log(data);})

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script type="text/javascript"src="https://webapi.amap.com/maps?v=1.4.15&key=34614f775ec9455cf2f9a5c7bb6acfa0&plugin=AMap.Driving,AMap.Autocomplete"></script>
<style type="text/css">*{margin: 0;padding: 0;list-style: none;}#container{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}#panel{position: fixed;background: white;top: 10px;right: 10px;width: 280px;}#search{width: 200px;height: 100px;position: absolute;left: 10px;right: 10px;background: white;}
</style></head>
<body><div id="container"></div> <div id="panel"></div><div id="search">起点：<input type="text" name="" id="startNode"><br>终点：<input type="text" name="" id="endNode"><br><button id="btn">开始导航</button></div><script type="text/javascript">var map = new AMap.Map('container',{zoom:11,center:[116.379391,39.861536],});new AMap.Autocomplete({input:'startNode'});new AMap.Autocomplete({input:'endNode'});btn.onclick = function(){new AMap.Driving({map:map,panel:'panel'}).search([{keyword:startNode.value,city:'北京'},{keyword:endNode.value,city:'北京'}],function(status,data){console.log(data);})}</script>
</body>
</html>

方法二：点击地图上任意两点，通过经纬度来进行导航

new AMap.Driving({map:map,panel:'panel'}).search(new AMap.LngLat(startX,startY),new AMap.LngLat(endX,endY),function(status,data){console.log(data);
})

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script type="text/javascript"src="https://webapi.amap.com/maps?v=1.4.15&key=34614f775ec9455cf2f9a5c7bb6acfa0&plugin=AMap.Driving,AMap.Autocomplete"></script>
<style type="text/css">*{margin: 0;padding: 0;list-style: none;}#container{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}#panel{position: fixed;background: white;top: 10px;right: 10px;width: 280px;}#search{width: 200px;height: 100px;position: absolute;left: 10px;right: 10px;background: white;}
</style></head>
<body><div id="container"></div> <div id="panel"></div><div id="search">起点：<input type="text" name="" id="startNode"><br>终点：<input type="text" name="" id="endNode"><br><button id="btn">开始导航</button></div><script type="text/javascript">var map = new AMap.Map('container',{zoom:11,center:[116.379391,39.861536],});new AMap.Autocomplete({input:'startNode'});new AMap.Autocomplete({input:'endNode'});var num =0,arr=[];map.on('click',function(e){num++;if(num%2==1){arr=[e.lnglat.Q,e.lnglat.P];}else{new AMap.Driving({map:map,panel:'panel'}).search(new AMap.LngLat(arr[0],arr[1]),new AMap.LngLat(e.lnglat.Q,e.lnglat.P),function(status,data){console.log(data);})}});</script>
</body>
</html>

高德地图——驾驶路线相关推荐

Android 高德地图中路线规划绘制界面线路
Android 高德地图中路线规划绘制界面线路下面代码是根据很多的经纬度的点,绘制出直线的线路.比较死板 /*** 绘制景区的路线*/private void setRouteInfo(List&l ...
vue使用高德地图导航路线失败，获取驾车数据失败：INVALID_USER_SCODE(解决方法)
高德地图使用路线导航最近做大屏项目,里面有地图定位,路线导航等方面的功能,在做路线定位是一直都是获取不到导航的路线,经过好长时间的百度看高德api文档终于找到解决方法. 解决方法添加高德地图安全密 ...
Android高德地图多路线规划----可点击选择路线
最近项目上有用到高德sdk,需求上要求多路线规划,并且可以在地图上点击选择路线.本着不想重复造轮子的驱使下(其实想偷懒),网上似乎没有例子,也可能是我找不到.最后没办法,只能自己实现. 在此做为记录, ...
vue人员轨迹_Vue项目（vuecli3.0搭建）集成高德地图实现路线轨迹绘制
先看最后实现的效果图高德地图api文档使用 1.在index.html里面引入高德地图js文件 2.引入之后我们就直接可以在vue组件里面使用了创建initMap方法,在mounted钩子函数中 ...
uniapp H5端使用高德地图完成路线规划
本项目是H5端,APP端地图的使用方法请参考我的另一篇博客uniapp,map地图组件打包原生APP 首先到高德地图API,申请web端key 参考高德H5端教程开始写代码高德地图JS API 1.准 ...
高德地图公交路线查询
AMap.LineSearch 公交路线服务,提供公交路线相关信息查询服务官网解释:AMap.LineSearch 公交路线查询类,通过extensions属性控制返回信息详略.公交线路信息包括起. ...
高德地图实现路线规划+轨迹回放（显示车牌）
联系作者Q/V:783021975 Tips: 1.高德好的方法非同步执行.一定要注意执行顺序或等待执行完成再进行具体的操作 2.高德地图不支持label旋转哦~ 3.百度是支持的.可以参考百度地图 ...
高德地图API路线规划
高德地图API基础使用高德地图API体验申请Key 初体验添加插件点击事件返回地址值两点之间获取驾车导航路线高德地图API体验申请Key 申请高德地图账号登录后,应用管理下创建自己的应 ...
嵌入地图跳转高德地图_根据输入的地址跳转到百度地图或者高德地图进行路线导航...
写在前面: 尽管精确度已然调至最佳, 但还是会有一定程度的定位误差, 作为开发者我已然尽力, 只能希望apple官方做些优化吧输入目的地地址时最好填入区, 不然有时会定位不到 http://deve ...

高德地图——驾驶路线

高德地图——驾驶路线相关推荐

最新文章

热门文章