知识学习

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 484|回复: 0

【行车路径规划】百度地图API,行车路径规划 起始点 途经点

[复制链接]

升级   100%

139

主题

139

帖子

647

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
647
发表于 2021-4-19 21:38:01 | 显示全部楼层 |阅读模式




  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  5. <style type="text/css">
  6. body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
  7. </style>
  8. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=eYf9sA6yVTFHlh9ytU4a0EYY"></script>
  9. <title>设置驾车路线途经点</title>
  10. </head>
  11. <body>
  12. <div id="allmap"></div>
  13. </body>
  14. </html>
  15. <script type="text/javascript">

  16. // 百度地图API功能
  17. var map = new BMap.Map("allmap");
  18. map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
  19. map.enableScrollWheelZoom(true);

  20. //起始点
  21. var p1 = new BMap.Point(116.301934,39.977552);
  22. var p2 = new BMap.Point(116.508328,39.919141);
  23. //途经点
  24. var p3 = new BMap.Point(116.405628,39.9139721);//天安门
  25. var p4 = new BMap.Point(116.455646,39.937433);//体育馆

  26. //行车路线规划实例
  27. var driving = new BMap.DrivingRoute(map, { renderOptions:{ map: map, autoViewport: true}       ,onPolylinesSet:function(Route){
  28.   //当线条添加完成时调用
  29.   for(var i=0;i<Route.length;i++){
  30.           var polyline = Route[i].getPolyline();//获取线条遮挡物
  31.                   polyline.setStrokeColor("#38CA69");//设置颜色
  32.                 polyline.setStrokeWeight(5);//设置宽度
  33.                 polyline.setStrokeOpacity(1);//设置透明度
  34.   }
  35.   console.log(Route);
  36. },onMarkersSet:function(routes) {
  37.   //当地图标记添加完成时调用
  38.         for (var i = 0; i <routes.length; i++) {
  39.                 //判断是否是途经点
  40.                 if(typeof(routes[i].Km)=="undefined"){
  41.                         map.removeOverlay(routes[i].marker); //删除起始默认图标
  42.                 }else{
  43.                         map.removeOverlay(routes[i].Km); //删除途经默认图标
  44.                 }
  45.         }
  46.     }
  47.   });
  48.   
  49.   driving.enableAutoViewport();//自动调整层级
  50.   
  51.   //自定义起点图标
  52.   var m = new BMap.Marker(p1);
  53.   m.setIcon(new BMap.Icon('http://demo.dingwei.cn/xingfou/public/Home/img/icon_21-25.png',new BMap.Size(20, 26),{anchor: new BMap.Size(10, 26)}));
  54. map.addOverlay(m);
  55.    //自定义终点图标
  56.     var m = new BMap.Marker(p2);
  57.   m.setIcon(new BMap.Icon('http://demo.dingwei.cn/xingfou/public/Home/img/icon_21-25.png',new BMap.Size(20, 26),{anchor: new BMap.Size(10, 26)}));
  58. map.addOverlay(m);
  59.    //自定义途经图标
  60.     var m = new BMap.Marker(p3);
  61.   m.setIcon(new BMap.Icon('http://demo.dingwei.cn/xingfou/public/Home/img/icon_21-25.png',new BMap.Size(20, 26),{anchor: new BMap.Size(10, 26)}));
  62. map.addOverlay(m);
  63.    //自定义途经图标
  64.     var m = new BMap.Marker(p4);
  65.   m.setIcon(new BMap.Icon('http://demo.dingwei.cn/xingfou/public/Home/img/icon_21-25.png',new BMap.Size(20, 26),{
  66. anchor: new BMap.Size(10, 26)//这是图标的偏移量,一般x设置为 图片宽度一半,高度想等,就正确了
  67.    
  68. }));
  69. map.addOverlay(m);
  70.   
  71. driving.search(p1, p2,{waypoints:[p3,p4]});//waypoints表示途经点

  72.             // driving.setPolylinesSetCallback(result => {
  73.             // 清除路线规划 重新设置路线颜色
  74.             // driving.clearResults();
  75.             // const points = [];
  76.             // result[0].Oq.forEach(item => {
  77.             //   points.push(new window.BMap.Point(item.lng, item.lat));
  78.             // });
  79.             // const polyline = new window.BMap.Polyline(points, {
  80.             //   strokeColor: '#6BC600',
  81.             //   strokeWeight: 3,
  82.             //   strokeOpacity: 0.8,
  83.             // });
  84.             // 创建折线
  85.             // map.addOverlay(polyline);
  86.             // });

  87.             // 起点终点重新添加图标
  88.             // const startIcon = new window.BMap.Icon(
  89.             //   require('../../../public/start.png'),
  90.             //   new window.BMap.Size(30, 120),
  91.             //   { anchor: new BMap.Size(10, 25) }
  92.             // );
  93.             // const endIcon = new window.BMap.Icon(
  94.             //   require('../../../public/start.png'),
  95.             //   new window.BMap.Size(30, 120),
  96.             //   { anchor: new window.BMap.Size(10, 25) }
  97.             // );

  98.             // driving.setMarkersSetCallback(result => {
  99.             //   result[0].marker.setIcon(startIcon);
  100.             //   result[1].marker.setIcon(endIcon);
  101.             // });

  102.             // 搜索成功后得回调
  103.             // driving.setSearchCompleteCallback(() => {
  104.             // 通过驾车实例,获得一系列点的数组
  105.             // const pts = driving
  106.             //   .getResults()
  107.             //   .getPlan(0)
  108.             //   .getRoute(0)
  109.             //   .getPath();
  110.             // const polyline = new window.BMap.Polyline(pts);
  111.             // map.addOverlay(polyline);
  112.             // });

  113. </script>
复制代码


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|知识学习 ( 鲁ICP备20015483号 )

GMT+8, 2022-8-11 01:45 , Processed in 0.035138 second(s), 23 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表