vue百度地图实现路线规划（含途经点）

踏浪而行foreval

已于 2023-02-28 13:43:38 修改

阅读量3.8k

点赞数 2

分类专栏：百度地图 js H5 文章标签：前端百度云

于 2022-04-20 10:44:30 首次发布

本文链接：https://blog.csdn.net/weixin_45849072/article/details/124291840

版权

H5 同时被 3 个专栏收录

14 篇文章 2 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

百度地图

4 篇文章 0 订阅

订阅专栏

页面展示：设置驾车路线途经点


<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
    body,
    html,
    #allmap {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin: 0;
      font-family: "微软雅黑";
    }
  </style>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的key"></script>
  <title>设置驾车路线途经点</title>
</head>

<body>
  <div id="allmap"></div>
</body>

</html>
<script type="text/javascript">

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

  //起始地
  var p1 = new BMap.Point(116.301934,39.977552);
  var p2 = new BMap.Point(116.508328,39.919141);
  //经停点
  var p3 = new BMap.Point(116.362390,39.938484);
  var p4 = new BMap.Point(116.379206,39.916850);

  //行车路线规划实例
  var driving = new BMap.DrivingRoute(map, {
    renderOptions: { map: map, autoViewport: true }, onPolylinesSet: function (Route) {
      //当线条添加完成时调用
      for (var i = 0; i < Route.length; i++) {
        var polyline = Route[i].getPolyline();//获取线条遮挡物
        polyline.setStrokeColor("#38CA69");//设置颜色
        polyline.setStrokeWeight(5);//设置宽度
        polyline.setStrokeOpacity(1);//设置透明度
      }
      console.log(Route);
    }, onMarkersSet: function (routes) {
      //当地图标记添加完成时调用
      for (var i = 0; i < routes.length; i++) {
        //判断是否是途经点
        if (typeof (routes[i].Km) == "undefined") {
          map.removeOverlay(routes[i].marker); //删除起始默认图标
        } else {
          map.removeOverlay(routes[i].Km); //删除途经默认图标
        }
      }
    }
  });

  driving.enableAutoViewport();//自动调整层级

  //自定义起点图标
  var m = new BMap.Marker(p1);
  m.setIcon(new BMap.Icon('https://s3.bmp.ovh/imgs/2022/04/19/b909ce0571a7227d.png', new BMap.Size(20, 26), { anchor: new BMap.Size(5, 26) }));
  map.addOverlay(m);
  //自定义终点图标
  var n = new BMap.Marker(p2);
  n.setIcon(new BMap.Icon('https://s3.bmp.ovh/imgs/2022/04/19/cc19a1e175c642da.png', new BMap.Size(20, 26), { anchor: new BMap.Size(5, 26) }));
  map.addOverlay(n);
  driving.search(p1, p2, { waypoints: [p3, p4] });//waypoints表示途经点

</script>

欢迎来到我的博客踏浪而行 , 有更多好玩的工具和IT分享

踏浪而行foreval

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
15
评论
vue百度地图实现路线规划（含途经点）

效果展示：设置驾车路线途经点<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,.
复制链接

扫一扫