百度地图绘制途径点/分段绘制路线

百度地图绘制途径点

百度地图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, 继续优化样式等

最终效果:

欢迎交流提问 ~

百度地图绘制途径点/分段绘制路线相关推荐

百度地图Polyline实现多颜色绘制
百度地图Polyline实现多颜色绘制最近一直在做地图绘制轨迹(BMap.Polyline) 功能概述:查询车辆 <= 7天的轨迹点,并绘制轨迹路线,这个路线包含两个功能:速度超过规定范围,线 ...
Android百度地图（六）自定义导航路线规划
Android百度地图(六)自定义导航路线规划兴奋加激动... 本文代码在http://blog.csdn.net/xyzz609/article/details/51959767的基础上进一步修改 ...
百度地图轨迹开发，如何绘制带有箭头的折线
最近在开发百度地图时,需要绘制行人行走的轨迹,并在轨迹内使用箭头表示方向,和我们平常使用百度地图导航时一样,能通过箭头表示人行走的方向. 通过百度地图API,我们很容易能找到划线的方法P ...
百度地图上根据经纬度集合绘制行车轨迹
以下是素材: 最近项目中用到了根据一段线路的经纬度集合来在地图上播放该车辆的行驶轨迹的需求.下面我就讲一下我实现步骤: 效果图如下(因为制作gif图为了控制大小去掉了很多帧,不必在意这些细节,嘿嘿!! ...
百度地图使用两条平行线表示路线
根据他人的程序修改的,原文是如何利用百度地图JSAPI画带箭头的线? 在此,使用两条平行线表示路线. 1.坐标计算: 2.代码如下: <%@ page language="java&q ...
百度地图查看导航记录，导航路线，记录驾驶路线
如图所示: 步骤: 1.打开APP:百度地图,登陆 2.点解左上角的头像 3.常用功能 > 足迹 4.右上角的"列表"按钮,(如图所示) 5.点击你想要查看的行程即可. ...
Flutter 调用百度地图APP实现位置搜索、路线规划
志在巅峰的攀登者,不会陶醉在沿途的某个脚印之中,在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天.每周,都会留下一些脚印,就是这些创作的 ...
IOS开发百度地图API－用点生成路线，导航，气泡响应
原地址:http://blog.sina.com.cn/s/blog_68661bd80101k4rx.html IOS百度地图API开发自定义气泡,点击气泡自动生成路线,以及拖拽 IOS百度地图开发 ...
百度地图驾车导航用来生成路线轨迹回放（LuShu）
百度地图秘钥申请(AK) 代码 <!DOCTYPE html> <html lang="en"> <head><meta charset ...

百度地图绘制途径点/分段绘制路线

百度地图绘制途径点

分段绘制路线

百度地图绘制途径点/分段绘制路线相关推荐

最新文章

热门文章