百度地图运行轨迹Demo

最新推荐文章于 2022-07-06 13:18:58 发布

-jieshi

最新推荐文章于 2022-07-06 13:18:58 发布

阅读量1.1k

点赞数 1

分类专栏：地图

本文链接：https://blog.csdn.net/qq_38166944/article/details/102913778

版权

地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html style="width: 100%; height: 100%;">
<head>
	<link rel="stylesheet" href="layui/css/layui.css">
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nGySXbEo38xSOIslt3KWVIW7N9Tayipr"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
	<script type="text/javascript" src="//api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
	<script type="text/javascript" src="//api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
	<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
	<script src="layui/layui.js"></script>
	<script src="js/jquery/jquery-1.11.3.min.js"></script>
	<meta charset="UTF-8">
	<title>百度地图运行轨迹Demo</title>
<style>
	#up-map-div{
		top:20px;
		left:200px;
		background: rgba(0, 0, 0, 0) none repeat scroll !important;/* rgba(0, 0, 0, 0.2) 前三个确定颜色，最后0.2确定透明度 */
		position:absolute;
		z-index:9999;
		border:2px solid blue;
		background-color:#FFFFFF;
	}
</style>
</head>
	<body style="width: 100%; height: 100%;">
		<div class="layui-row" style="width: 100%; height: 100%;">
			<div class="layui-container" style="width: 100%; height: 100%;">  
				<div class="layui-col-md2" style="overflow-x: auto; overflow-y: auto; height: 100%; width:300px;">
				</div>
				<div class="layui-col-md10" style="width: 75%; height: 100%;">
					<div id="baiduMap" style="width: 100%; height: 100%;"></div>
					<div id="up-map-div">
						<button id="show">查看详情</button>
						<!--<span id="show">悬浮div，让它悬浮在地图上面</span>-->
					</div>
				</div>
			</div>
		</div>
	</body>
<script> 
	
	
	var billData = {
			ADJUST_REASON_EXPLAIN: null,
			ADJUST_REASON_NAME: null,
			AMT_COST_SUM: 9195.74,
			CARRIER_NAME: "淮安市淮盛货物运输有限公司",
			DELIVER_DATE: "2019-09-05",
			FACT_NAME: "淮阴卷烟厂",
			IS_SHARE_NAME: "否",
			LATITUDE: 33.5,
			LONGITUDE: 119.06,
			ORDER_STATUS_NAME: "智能优化",
			QTY_QUANTITY_SUM: 1125,
			QTY_TRAY_SUM: 0,
			QTY_WEIGHT_SUM: 20.455,
			STOWAGE_ID: "10030799",
			TRAN_TYPE_NAME: "汽运",
	}
	
	var mapData = [
		{
			   BUSI_NAME: "蚌埠",
				BUSI_STORE_CODE: "3634",
				LATITUDE: 32.880051,
				LONGITUDE: 117.323111,
				QTY_QUANTITY_SUM: 300,
				TRAN_ORDER_NO: 1,
		},
		{
			   BUSI_NAME: "信阳",
				BUSI_STORE_CODE: "4380",
				LATITUDE: 32.16,
				LONGITUDE: 114.089,
				QTY_QUANTITY_SUM: 825,
				TRAN_ORDER_NO: 2,
		}
	]
	//$("#showContext").hide();
	map(billData,mapData);
	function map(billData,mapData){
		var point = []; //存储商业公司图经点
		point.push(new BMap.Point(billData.LONGITUDE, billData.LATITUDE)); //转换坐标
	    for(var item in mapData){
	    	var point1 = new BMap.Point(mapData[item].LONGITUDE, mapData[item].LATITUDE); //转换坐标
	    	point.push(point1);
	    }
		// 百度地图API功能
		var map = new BMap.Map("baiduMap");    // 创建Map实例
	    map.centerAndZoom(point[0], 13);  //第一个参数可以是根据之前创建好的一个点为中心，第二个参数是地图缩放级别，最大为19，最小为0。
		map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
		map.clearOverlays();   //清除地图上所有的覆盖物  
		var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
		map.addControl(top_left_control);   
		var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_LARGE}); //右上角，完整的缩放平移
		map.addControl(top_right_navigation); 
		var options = {
				 //renderOptions:{map: map, autoViewport: true},
		         onSearchComplete: function(results){
		            if (transit.getStatus() == BMAP_STATUS_SUCCESS){
		                // 获取第一条方案
		                var plan = results.getPlan(0);
		                // 获取方案的驾车线路
		                var route = plan.getRoute(0);
		                // 获取每个关键步骤,并输出到页面
		                var polylinePoints = [];
		                for(var i = 1; i <= plan.getNumRoutes(); i++){
		                    var pathArr = plan.getRoute(i - 1).getPath();
		                    polylinePoints.push(pathArr);
		                }
		                	                
		             	// 自定义的路径   线的颜色等                                         
		                var polyline = new BMap.Polyline(plan.getRoute(0).getPath(), {
		                    strokeColor: '#DC143C',
		                    strokeWeight: '4',
		                    strokeOpacity: '.8'
		                });
	
		                map.addOverlay(polyline);
		                addMark();//增加标杆
		            }
		        }
		    };
	    var transit = new BMap.DrivingRoute(map, options);
	  /*  if(point.length>2){
	    	transit.search(point[0], point[2],{waypoints:[point[1]]});//waypoints表示途经点
	    }else{
	    	transit.search(point[0], point[1]);
	    }*/
	    for(var i=0;i<point.length-1;i++){
	    	transit.search(point[i], point[i+1]);
		}
	    
	 // 设置中心点和地图缩放级别
		function setCenterAndZoom(result){
		    var cityName = result.name;
		    map.centerAndZoom(cityName,12);  
		}
		
	  function addMark(){
	       for(var i = 0 ; i< point.length ; i++){
	    		var marker = new BMap.Marker(point[i]); 
	    		var opts = { 
	    	      width : 100,     // 信息窗口宽度   
	    	      height: 100,     // 信息窗口高度  
	    	      title : "<h3><b>库房位置信息</b></h3>	" }  // 信息窗口标题  
	    		
	    		map.addOverlay(marker); 
	    		if(i==0){
	    			marker.addEventListener("click", function(e){ 
		    			for(item in mapData){
	    					var info = "<b>工厂:</b>&nbsp;&nbsp;"+billData.FACT_NAME+"<br/><b>总数量（件）:</b>&nbsp;"+billData.QTY_QUANTITY_SUM
	    		    		var infoWindow = new BMap.InfoWindow(info, opts);  // 创建信息窗口对象  
	    					this.openInfoWindow(infoWindow);  
		    			}
		    	    	
		    	    });
	    		}else{
	    			marker.addEventListener("click", function(e){ 
		    			for(item in mapData){
		    				if(mapData[item].LONGITUDE==e.target.point.lng 
		    						&& mapData[item].LATITUDE==e.target.point.lat){
		    					console.log(mapData[item].QTY_QUANTITY_SUM)		
		    					var info = "<b>商业公司:</b> "+mapData[item].BUSI_NAME+"<br/><b>总数量（件）:</b>&nbsp"+mapData[item].QTY_QUANTITY_SUM;
		    		    		var infoWindow = new BMap.InfoWindow(info, opts);  // 创建信息窗口对象  
		    					this.openInfoWindow(infoWindow);  
		    				}
		    			}
		    	    	
		    	    });
	    		}
	    		
	    		if(i==0){
	    			var lab1 = new BMap.Label("起点",{position:point[0]}); 
	    			map.addOverlay(lab1); 
	    		}else if(i==point.length-1){
	    			var lab3 = new BMap.Label("终点",{position:point[point.length-1]});
	    			map.addOverlay(lab3);
	    		}else{
	    			var lab2 = new BMap.Label("途径点",{position:point[i]}); 
	    			map.addOverlay(lab2);
	    		}
	    		
	    	}
	       setTimeout(function(){  
	           map.setViewport(point);          //调整到最佳视野  
	       },1000);  
	    }
	  
		$("#show").click(function(){
			var opts = {    
			    width : 250,     // 信息窗口宽度    
			    height: 100,     // 信息窗口高度    
			    title : "<h3><b>详情</b></h3>"  // 信息窗口标题   
			} 
			var info = "<table><thead><th>编号</th><th>姓名</th><thead><tr><td>10001</td><td>张三</td></tr></table>"
			var infoWindow = new BMap.InfoWindow(info, opts);  // 创建信息窗口对象    
			map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
		});
		
	}
</script>
</html>

效果图:

-jieshi

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
百度地图运行轨迹Demo

<!DOCTYPE html><html style="width: 100%; height: 100%;"><head> <link rel="stylesheet" href="layui/css/layui.css"> <script type="text/javascript" src="http://api.map.bai...
复制链接

扫一扫