驾车路线
引入插件 amap.driving
<script type="text/javascript" src="/d/file/titlepic/maps
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>map</title> <script type="text/javascript" src="/d/file/titlepic/maps <style> *{margin:0;padding:0;list-style: none;} #container {width:100%; height: 100%;top:0;left:0;position: absolute; } #panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;} </style></head><body> <div id="container"></div> <div id="panel"></div> <script> var map=new amap.map("container",{ zoom:11 }); //使用插件 new amap.driving({ map:map, panel:"panel" }).arch([ {keyword:"宁波大学",city:"宁波"}, {keyword:"汽车东站",city:"宁波"} ],function(status,data){ c国庆祝福语 简洁大气onsole.log(data); }); </script> </body></html>输入起点和终点，点击按钮规划路线
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>map</title> <script type="text/javascript" src="https://webapi.amap.com/maps钢铁是怎样炼成的主人公是谁?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=amap.driving,amap.autocomplete"></script> <style> *{margin:0;padding:0;list-style: none;} #container {width:100%; height: 100%;top:0;left:0;position: absolute; } #panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;} #arch{position: absolute;width:200px;height:100px;top:10px;left:10px;background-color: #fff;} </style></head><body> <div id="container"></div> <div id="panel"></div> <div id="arch"> 山崩地裂 起点<input type="text" id="node1"><br> 终点<input type="text" id="node2"><br> <button id="btn">开始导航</button> </div> <script> var map=ne财务统计w amap.map("container",{ zoom:11 }); // 给起点和终点添加自动补全功能 new amap.autocomplete({ input:"node1" }) new amap.autocomplete({ input:"node2" }) btn.onclick=function(){ //使用插件 new amap.driving({ map:map, panel:"panel" }).arch([ {keyword:node1.value,city:"宁波"}, {keyword:node2.value,city:"宁波"} ],function(status,data){ console.log(data); }); } </script> </body></html>通过经纬度来进行导航
实现鼠标点击两个地址，自动进行导航
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>map</title> <script type="text/javascript" src="/d/file/titlepic/maps <style> *{margin:0;padding:0;list-style: none;} #container {width:100%; height: 100%;top:0;left:0;position: absolute; } #panel{position: fixed;width:280西子湖小学px;top:10px;right:10px;background-color: #fff;} #arch{position: absolute;width:200px;height:100px;top:10px;left:10px;background-color: #fff;} </style></head><body> <div id="container"></div> <div id="panel"></div> <script> var map=new amap.map("container",{ zoom:11 }); var i=0,arr=[]; map.on("click",function(e){ i++; console.log(i); if(i%2==1){ arr=[e.lnglat.r,e.lnglat.q]; }el{ //使用插件 new amap.driving({ map:map, panel:"panel" }).arch(new amap.lnglat(arr[0],arr[1]),new amap.lnglat(e.lnglat.r,e.lnglat.q),function(status,data){ console.log(data); }); } }) </script> </body></html>
本文发布于:2023-04-07 08:29:55，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/ba453f7af37a4a86df81b934dbe63872.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：高德地图API之驾车路线.doc
本文 PDF 下载地址：高德地图API之驾车路线.pdf
| 留言与评论（共有 0 条评论） |
