js使用百度地图api绘制单、多线路

代码如下
1.实例化Bmap

let map = new BMap.Map("allmap", {mapType: BMAP_HYBRID_MAP}); // 创建Map实例map.centerAndZoom(new BMap.Point('这里写经度','这里写纬度'), 11); // 初始化地图,设置中心点坐标和地图级别map.addControl(new BMap.ScaleControl()); //添加左下方比例尺控件map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT,type: BMAP_NAVIGATION_CONTROL_ZOOM//显示完整的平移缩放空间}));//请求获取所有路线 ... 我得到的数据为carList 给进方法入参toFillData(carList);

2.绘制多条线路（多条一起展示）

function toFillData(infoArr) {map.clearOverlays();let obj = {}let driviObj = {}let arr = []// 过滤空的路线infoArr = infoArr.filter(item => {if (item.logisticsInfo != null && item.logisticsInfo.length > 0) {return item}})for (let i = 0; i < infoArr.length; i++) {//起始地obj['start' + i] = new BMap.Point(Number(infoArr[i].logisticsInfo[0].lnt), Number(infoArr[i].logisticsInfo[0].lat));obj['end' + i] = new BMap.Point(Number(infoArr[i].logisticsInfo[infoArr[i].logisticsInfo.length - 1].lnt), Number(infoArr[i].logisticsInfo[infoArr[i].logisticsInfo.length - 1].lat));//行车路线规划实例driviObj[i] = new BMap.DrivingRoute(map, {renderOptions: {map: map, autoViewport: false}, onPolylinesSet: function (Route) {//当线条添加完成时调用for (let k = 0; k < Route.length; k++) {var polyline = Route[k].getPolyline();//获取线条遮挡物polyline.setStrokeColor("#38CA69");//设置颜色polyline.setStrokeWeight(5);//设置宽度polyline.setStrokeOpacity(1);//设置透明度}console.log(Route);}, onMarkersSet: function (routes) {//当地图标记添加完成时调用for (let h = 0; h < routes.length; h++) {//判断是否是途经点if (typeof (routes[h].Km) == "undefined") {} else {map.removeOverlay(routes[h].Km); //删除途经默认图标}}}});arr.push({key: i,middle: []})for (let j = 1; j < infoArr[i].logisticsInfo.length - 1; j++) {if (i == arr[i].key) {arr[i].middle.push(new BMap.Point(Number(infoArr[i].logisticsInfo[j].lnt), Number(infoArr[i].logisticsInfo[j].lat)))}}// console.log(obj)// console.log(driviObj)// console.log(arr)driviObj[i].search(obj['start' + i], obj['end' + i], {waypoints: arr[i].middle});  //waypoints表示途经点// driviObj[i].enableAutoViewport();//自动调整层级
}

3.绘制单条线路（使用场景：点击该数据展示该数据线路，传ID请求得到经纬度）

let realArr = null$.ajax({type: "get",url: "url",data: {id: id},async: false,success: function (res) {realArr = res}})if (realArr.logisticsInfo == null || realArr.logisticsInfo.length <= 0) {alert('此处暂无路线！')return}map.clearOverlays();// 正常路线let normalR = realArr.logisticsInfolet normalStart = new BMap.Point(Number(normalR[0].lnt), Number(normalR[0].lat));let normalEnd = new BMap.Point(Number(normalR[normalR.length - 1].lnt), Number(normalR[normalR.length - 1].lat));let normalDriving = new BMap.DrivingRoute(map, {renderOptions: {map: map, autoViewport: true}, onPolylinesSet: function (Route) {//当线条添加完成时调用for (let k = 0; k < Route.length; k++) {var polyline = Route[k].getPolyline();//获取线条遮挡物polyline.setStrokeColor("#38CA69");//设置颜色polyline.setStrokeWeight(5);//设置宽度polyline.setStrokeOpacity(1);//设置透明度}console.log(Route);}, onMarkersSet: function (routes) {//当地图标记添加完成时调用for (let h = 0; h < routes.length; h++) {//判断是否是途经点if (typeof (routes[h].Km) == "undefined") {} else {map.removeOverlay(routes[h].Km); //删除途经默认图标}}}});if (realArr.logisticsStopInfo != null && realArr.logisticsStopInfo.length > 0) {let obj = {}let driviObj = {}let arr = []// 过滤空的路线let stopArr = realArr.logisticsStopInfofor (let i = 0; i < stopArr.length; i++) {//起始地obj['start' + i] = new BMap.Point(Number(stopArr[i].value[0].lnt), Number(stopArr[i].value[0].lat));obj['end' + i] = new BMap.Point(Number(stopArr[i].value[stopArr[i].value.length - 1].lnt), Number(stopArr[i].value[stopArr[i].value.length - 1].lat));//行车路线规划实例driviObj[i] = new BMap.DrivingRoute(map, {renderOptions: {map: map, autoViewport: true},onPolylinesSet: function (Route) {//当线条添加完成时调用for (let k = 0; k < Route.length; k++) {var polyline = Route[k].getPolyline();//获取线条遮挡物polyline.setStrokeColor("red");//设置颜色polyline.setStrokeWeight(5);//设置宽度polyline.setStrokeOpacity(8);//设置透明度}console.log(Route);},onMarkersSet: function (routes) {//当地图标记添加完成时调用for (let h = 0; h < routes.length; h++) {//判断是否是途经点if (typeof (routes[h].Km) == "undefined") {} else {map.removeOverlay(routes[h].Km); //删除途经默认图标}}}});arr.push({key: i,middle: []})for (let j = 1; j < stopArr[i].value.length - 1; j++) {if (i == arr[i].key) {arr[i].middle.push(new BMap.Point(Number(stopArr[i].value[j].lnt), Number(stopArr[i].value[j].lat)))}}// console.log(obj)// console.log(driviObj)// console.log(arr)driviObj[i].search(obj['start' + i], obj['end' + i], {waypoints: arr[i].middle});  //waypoints表示途经点driviObj[i].disableAutoViewport()}}let normalArr = []for (let i = 1; i < normalR.length - 1; i++) {normalArr.push(new BMap.Point(Number(normalR[i].lnt), Number(normalR[i].lat)))}normalDriving.search(normalStart, normalEnd, {waypoints: normalArr});setTimeout(() => {map.centerAndZoom(normalStart, 12);},500)

js使用百度地图api绘制单、多线路相关推荐

android百度地图箭头,百度地图API绘制带头箭头的折线
源代码: body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;} #l-map{height:100%;wid ...
前端（1）js：百度地图api使用
(1)百度地图API链接 1)获取key http://lbsyun.baidu.com/apiconsole/key 2)查看相关API文档 http://lbsyun.baidu.com/inde ...
百度地图api 绘制乡镇边界
我们在使用百度地图api想要展示苏州市吴中区各乡镇的行政区范围: 百度api有提供了"添加行政区划"的示例:http://lbsyun.baidu.com/jsdemo.htm#c ...
Echarts结合百度地图API绘制热力图
最近项目中需要使用echarts与百度地图API结合来绘制事故发生热力图,在将其与百度地图结合的过程中遇到了一些问题,现将其过程与解决方案记录下,以供日后参考.echarts中结合百度地图API的热力 ...
heatmap.js调用百度地图api做热力图
做热力图使用heatmap.js模块然后就是来挑用百度地图api是他展现在百度地图上面一首先你要申请一个百度地图api接口的密钥申请网址申请密钥之后,先登录上自己的账号然后创建应用三就是来取一 ...
百度地图API绘制轨迹
百度地图Javascript API绘制轨迹 (首先贴两个网站: 1.百度地图API官方示例. 2.百度地图Javascript API v3.0参考类. 一.新建Html文档新建文档可以直接从官方 ...
百度地图描绘轨迹html,百度地图API 绘制轨迹历史
DOCTYPE html> 2 3 4 5 6 7 body, html{width:100%;height:100%;overflow:hidden;margin:0;font-family: ...
js中百度地图API获取本地搜索全部结果自定义显示效果
最近碰到一个关于百度地图api的问题: 1.首先我需要获取到一个本地搜索的全部结果: 2.然后需要对获取的结果信息进行读取以及对这些信息的个性化展示大致操作如下,首先通过result.getNumP ...
js调用百度地图API，实现地图标注位置
直接调用js就可以,通过设置中心位置来实现显示的中心确定,入图中的小括号:通过标注坐标来在地图中显示你自己的位置,如图"青岛农业大学"标注: 效果图如下: 代码如下: <di ...

js使用百度地图api绘制单、多线路

js使用百度地图api绘制单、多线路相关推荐

最新文章

热门文章