百度地图API，改变驾车路线颜色（仿淘宝快递查询，一条路线两个颜色）

想仿淘宝做一个物流查询，分为：寄件点、当前点、收件点和路线图。

快递已走的路径（寄件点到当前点的颜色）和未走的路径（当前点到收件点）用颜色进行区分。

利用百度地图提供的API（当时遇到了点问题，所以用的版本是 JavaScript API V2.0）—— 驾车路线规划。

百度地图提供的驾车路线规划包括：起点，终点，途经点；和物流查询中我可以提供的数据恰好对应。

百度地图API	物流查询	代码中对应字段
起点（p1）	寄件点	`start`
终点（p2）	收件点	`end`
途径点（p3, p4）	当前位置	`current`

getMap() {var map = new BMap.Map(this.item.id, { enableMapClick: false });map.enableScrollWheelZoom(true);var start = new BMap.Point(this.startLng, this.startLat);var end = new BMap.Point(this.endLng, this.endLat);var current = new BMap.Point(this.currentLng, this.currentLat);// 自定义图标var startIcon = new BMap.Icon(require("../../assets/images/point.png"),new BMap.Size(25, 25));var currentIcon = new BMap.Icon(require("../../assets/images/car.png"),new BMap.Size(25, 25));var endIcon = new BMap.Icon(require("../../assets/images/point.png"),new BMap.Size(25, 25));var driving = new BMap.DrivingRoute(map, {renderOptions: { map: map, autoViewport: true },onPolylinesSet: function(Route) {for (var i = 0; i < Route.length-1; i++) {var polyline = Route[i].getPolyline(); //获取线条遮挡物polyline.setStrokeColor("#1474E4"); //设置颜色polyline.setStrokeWeight(6); //设置宽度polyline.setStrokeOpacity(0.8); //设置透明度}},onMarkersSet: function(routes) {//标注点完成回调map.clearOverlays(); //删除点var myStart = new BMap.Marker(start, { icon: startIcon });map.addOverlay(myStart); //添加自定义起点图标var myEnd = new BMap.Marker(end, { icon: endIcon });map.addOverlay(myEnd); //添加自定义终点图标var myCurrent = new BMap.Marker(current, { icon: currentIcon });map.addOverlay(myCurrent); //添加自定义途径点图标}});driving.search(start, end, { waypoints: [current] });}

注：代码中寄件点、当前点、收件点的坐标都是从后台接口传来的点的经纬度信息。

示意图：

参考：https://my.oschina.net/Peron/blog/913188

百度地图API，改变驾车路线颜色（仿淘宝快递查询，一条路线两个颜色）相关推荐

使用百度地图API实现驾车导航
前面两篇文章提到了使用百度API实现定位等功能,现在做了一个利用百度地图API实现驾车导航的功能,不仅仅是驾车导航,利用这套API还可以实现公交以及步行的导航功能,这里只介绍如何实现驾车导航,步行和公 ...
仿淘宝网首页导航条效果
< html > < head > < meta http - equiv = " Content-Type " content = " ...
百度地图api改变覆盖物背景实例及css颜色值简介
在此鸣谢buptwusuopu的技术支持在调用百度地图api的时候,为了改变覆盖物的颜色,如图中椭圆型的填充色.可以到百度api的库中查找方法http://developer.baidu.com/m ...
百度地图api 自定义驾车线路规划车辆实时定位
项目需求根据百度api给出的接口实现从始发地→目的地线路规划以及车辆的实时位置跟踪定位 1.首先引入百度API <script type="text/javascript& ...
百度地图API和高德地图API资料集锦
[高德地图API]从零开始学高德JS API(五)路线规划--驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务--POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数 ...
php百度地图接口两点测距,百度地图Api 根据两个坐标点计算距离
百度地图Android Sdk的Api里面,没有现成的直接获取两个坐标点之间距离的方法,但是,在jsapi里面,有直接计算距离的方法. class Point: pass def max(a,b): ...
利用百度地图api，自定义起始点进行驾车路线的搜索，并可以根据不同驾车策略给出驾驶指导
利用百度地图api,通过在输入框(带自动填充)输入起始点,然后根据用户选择的不同驾车策略来进行驾车路线搜索并显示具体的路线信息.驾车策略共三种,默认路线(时间最短).最短路程.不走高速.左侧搜索栏可以 ...
百度地图api实现路线规划之步行驾车
着手做一个用户轨迹的demo,大概分了下步骤:1.过滤边缘点:2.分段量化聚类焦点关键点:3.基于关键点的百度地图api路线规划:4:路线择优我们先看下第三点基于键点的百度地图api路线规划的方案, ...
android 百度地图驾车导航,百度地图API详解之驾车导航
本文将向大家介绍如何使用百度地图API提供的驾车导航服务进行开发. 一个简单的示例驾车导航服务根据传入的起点和终点信息给出从起点到终点的驾车路线,我们先从一个最简单的示例看起: var map = ...

百度地图API，改变驾车路线颜色（仿淘宝快递查询，一条路线两个颜色）

想仿淘宝做一个物流查询，分为：寄件点、当前点、收件点和路线图。

百度地图API，改变驾车路线颜色（仿淘宝快递查询，一条路线两个颜色）相关推荐

最新文章

热门文章

百度地图API，改变驾车路线颜色（仿淘宝快递查询，一条路线两个颜色）

想仿淘宝做一个物流查询，分为：寄件点、当前点、 收件点 和 路线图。

百度地图API，改变驾车路线颜色（仿淘宝快递查询，一条路线两个颜色）相关推荐

最新文章

热门文章

想仿淘宝做一个物流查询，分为：寄件点、当前点、收件点和路线图。