标签：map 分段 middlePoints lat var lng 绘制 百度 gps

百度地图绘制途径点

百度地图Api地址:
https://lbsyun.baidu.com/

公司项目中要求绘制物流信息,需体现途径点
但是我在其中没有找到有关绘制路线,设定途径点的相关说明

其实就是下面这句,给 search方法的第三个参数传一个waypoints对象:
其中middlePoints为标点的数组

      //途经点方式化路线:
       driving.search(startPoint, endPoint, { waypoints: middlePoints })

但是这个方法并不精准,由于没找到相关官方说明,也没深入考究,效果如下:

计算路线并未完全经过途径点

于是我们换一种思路

分段绘制路线

多次执行 driving.search(startPoint, endPoint)

      for (let i = 0; i < middlePoints.length; i++) {
        if (i === 0) {
          driving.search(startPoint, middlePoints[i])
        } else {
          driving.search(middlePoints[i - 1], middlePoints[i])
        }
      }
      driving.search(middlePoints[middlePoints.length - 1], endPoint)

但是这时就需要运用到更底层一点的函数
链接: 百度地图jsapi 类参考

在路线的构造函数里面,绘制途径点的每一段路线,并修改样式等等

最终详细代码如下:

		//点的坐标值
	    var gps = [
          {lng: 125.532203,lat: 43.715047},
          {lng: 123.545295,lat: 42.009887},
          {lng: 116.186376,lat: 39.974898},
          {lng: 114.539818,lat: 38.040826},
          {lng: 113.675145,lat: 34.815406},
          {lng: 112.95765,lat: 28.234227,},
          {lng: 109.940493,lat: 27.62963,},
          {lng: 106.684172,lat: 26.5924,},
          {lng: 102.74715,lat: 24.926418,}
      ]
      
      // 实例化地图
      var map = new BMapGL.Map('container')//注意这里的container为元素id,且不能修改
      map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11)
      map.enableScrollWheelZoom(true)//地图和滚轮放大

      //建立初始点,结束点,途经点数组
      var middlePoints = []
      var startPoint = new BMapGL.Point(gps[0].lng, gps[0].lat)
      var endPoint = new BMapGL.Point(
        gps[gps.length - 1].lng,
        gps[gps.length - 1].lat
      )
      for (let i = 0; i < gps.length; i++) {
        if (i === 0 || i === gps.length - 1) {
          continue
        }
        var point = new BMapGL.Point(gps[i].lng, gps[i].lat)
        middlePoints.push(point)
      }

      //调整到最佳视野
      setTimeout(function () {
        map.setViewport([startPoint, endPoint])
      }, 1000)

      //创建百度地图驾车实例
      var driving = new BMapGL.DrivingRoute(map, {
        renderOptions: { map: map, autoViewport: false },
        onSearchComplete(results) {
          // 绘制途径路线
          var pts = results.getPlan(0).getRoute(0).getPath()
          var polyline = new BMapGL.Polyline(pts)
          polyline.setStrokeColor('#001E50')
          polyline.setStrokeOpacity(1)
          map.addOverlay(polyline)
        },
        onMarkersSet(routes) {
          // 删点画点
          map.removeOverlay(routes[0].marker)
          map.removeOverlay(routes[routes.length - 1].marker)
          middlePoints.forEach((element) => {
            var marker = new BMapGL.Marker(element)
            map.addOverlay(marker)
          })
          var startMarker = new BMapGL.Marker(startPoint)
          var endMarker = new BMapGL.Marker(endPoint)
          map.addOverlay(startMarker)
          map.addOverlay(endMarker)
        },
        onPolylinesSet(routes) {
          // 路线绘制
          routes.forEach((Route) => {
            var polyline = Route.getPolyline()
            polyline.setStrokeColor('#001E50')
            // polyline.setStrokeOpacity(1)
            polyline.setStrokeWeight(1)
          })
        },
      })

      //途经点方式化路线:
      // driving.search(startPoint, endPoint, { waypoints: middlePoints })

      //分段画路线:
      for (let i = 0; i < middlePoints.length; i++) {
        if (i === 0) {
          driving.search(startPoint, middlePoints[i])
        } else {
          driving.search(middlePoints[i - 1], middlePoints[i])
        }
      }
      driving.search(middlePoints[middlePoints.length - 1], endPoint)
      

建议根据需求研究一下api, 继续优化样式等

最终效果:

欢迎交流提问 ~

标签：map,分段,middlePoints,lat,var,lng,绘制,百度,gps
来源： https://blog.csdn.net/weixin_53296753/article/details/122054689

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。