目 录CONTENT

文章目录

vue百度地图实现路线规划(含途经点)

萧瑟
2023-02-28 / 0 评论 / 1 点赞 / 660 阅读 / 2,052 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-08-04,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

页面展示

途径点


<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>

扫码_搜索联合传播样式-标准色版

1

评论区