nizongfeng
/
ZZWX


			
				
					
						
						
							
							<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="css/main.css"/>
	<link rel="stylesheet" type="text/css" href="css/master.css"/>
	<link rel="stylesheet" type="text/css" href="css/ui-base.css"/>
	<link rel="stylesheet" type="text/css" href="css/ui-box.css"/>
	<link rel="stylesheet" type="text/css" href="css/ui-color.css"/>
	
		
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
		#golist {display: none;}
		@media (max-device-width: 780px){#golist{display: block !important;}}
		.infoBoxContent{
			font-size:0.12rem;
			width: 2.1rem;
			height: 0.523rem;
			background-image: url(images/img_shangchedian.png);
			background-repeat:no-repeat;
			background-size:2.1rem 0.523rem;
			left: -0.93rem;
			top: -0.25rem;
		}
		.div1{
			width: 1.63rem;
			margin: 0 0.05rem 0 0.1rem;
			float: left;
			top: -0.02rem;
		}
		.div2{
			width: 0.32rem;
			height: 0.46rem;
			float: left;
			color: #fff;
			margin-top: 0.09rem;
		    text-align: center;
		    top: -0.02rem;
		}
		.bus_info{
			position: fixed;
			top: 0.1rem;
			left: 0.1rem;
			right: 0.1rem;
			background-color: #fff;
			border: 1px solid #f0f2f6;
			border-radius: 0.03rem;
			box-shadow: 0 0 6px 0 rgba(60, 67, 79, 0.2);
		}
		.infoBox img{
			width: 0px!important;
			height: 0px!important;
		}
	</style>
	<script src="js/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?ak=7GGxAR5VERdkfGTHRzIzDw4qzKk6hZk3&v=2.0"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?type=quick&ak=7GGxAR5VERdkfGTHRzIzDw4qzKk6hZk3&v=1.0"></script>
	
	<script type="text/javascript" src="js/InfoBox_min.js"></script>
	<title>我要找车</title>
</head>
<body>
	<div id="allmap"></div>
	<div class="bus_info">
		<div class="ub ub-ver">
			<div style="border-bottom: 1px solid #f0f2f6;" class="ub ub-ac">
				<div ontouchstart="show_bus()" style="padding: 0.13rem 0rem 0.1rem 0.15rem;" class="ub ub-ver ub-f1">
					<div id="name_and_nomber" class="ulev1 lightblack_color"></div>
					<div id="bus_type" class="commongray_color"></div>
				</div>
				<a id="call_phone" style="display: inline-block;" href="tel:"><img style="width: 0.16rem;top:0.02rem;position: relative;padding: 0.15rem 0.15rem 0.15rem 0.15rem;" src="images/a1/call_phone.png"/></a>
			</div>
			<div id="bus_pic" style="overflow: hidden;display: none;"><img id="bus_img" style="width: 3.55rem;height: 1.36rem;" src="images/a1/bus_pic.png"/></div>
			<div style="padding: 0.01rem 0;" ontouchstart="show_bus()" class="ub ub-pc"><img id="on_off" style="width: 0.12rem;" src="images/a1/enter_on.png"/></div>
		</div>
	</div>
</body>
</html>
<script type="text/javascript">
	$(document).ready(function(){
		var order_id = getPar("order_id");
		var run_date = getPar("run_date");
//		var data = {
//			  "flag": true,
//			  "msg": "",
//			  "url": "",
//			  "code": "",
//			  "data": {
//			    "res": {
//			      "address": "上海瑞金二路118号",
//			      "res_id": "9196",
//			      "res_name": "上海瑞金洲际酒店",
//			      "longitude": "121.471058",
//			      "latitude": "31.219127"
//			    },
//			    "bus": {
//			      "bus_id": "1094",
//			      "bus_no": "沪BT8050",
//			      "driver_name": "龙涛",
//			      "driver_mobile": "13916822100",
//			      "bus_name": "暂无",
//			      "color": "暂无",
//			      "img_url": "images/a1/bus_pic.png",
//			      "longitude": "121.505726738748",
//			      "latitude": "31.2132681656562"
//			    }
//			  }
//			}
//		if(data.flag == true){
//			console.log(data);
//			$("#call_phone").attr("href","tel:"+data.data.bus.driver_mobile);
//			$("#name_and_nomber").html(data.data.bus.driver_name+'&nbsp;&nbsp;&nbsp;'+data.data.bus.bus_no);
//			$("#bus_type").text(data.data.bus.color+'·'+data.data.bus.bus_name);
//			$("#bus_img").attr("src",data.data.bus.img_url);
//			srarch_bus(data.data);
//		}else{
//			alert(data.msg);
//		}
		
		$.ajax({
			url:base_api+"weUser/journey/findCar",//请求地址
			type: "post",                       //请求方式
			data:{order_id:order_id,run_date:run_date},
			dataType: "json",
			async:false,
			success: function (data) {
				console.log(data);
				if(data.flag == true){
					console.log(data);
					$("#call_phone").attr("href","tel:"+data.data.bus.driver_mobile);
					$("#name_and_nomber").html(data.data.bus.driver_name+'&nbsp;&nbsp;&nbsp;'+data.data.bus.bus_no);
					$("#bus_type").text(data.data.bus.color+'·'+data.data.bus.bus_name);
					$("#bus_img").attr("src",data.data.bus.img_url);
					srarch_bus(data.data);
				}else{
					alert(data.msg);
				}
		    },
			fail: function (data) {
				
				 }
		});
	});
	function srarch_bus(data){
		// 百度地图API功能
		var map = new BMap.Map("allmap",{enableMapClick:false});
		//创建车、车站两个点
		var pt_station = new BMap.Point(data.res.longitude,data.res.latitude); //上车站坐标
		var pt_car = new BMap.Point(data.bus.longitude,data.bus.latitude);		//车的坐标
		
		//map.addControl(new BMap.ZoomControl());          
		
	//	var sContent = '<span onclick="zzzz()" style="padding:5px;border:1px solid #ccc;display:inline-block;font-size:12px;">小黑</span><span style="padding:5px;border:1px solid #ccc;display:inline-block;font-size:12px;">小猛</span>';
		
		//设置上车站图片大小
		var img_station_opts = {
			imageSize: new BMap.Size(22,35)
		}
		//设置车图片大小
		var img_car_opts = {
			imageSize: new BMap.Size(29,38)
		}
		var myIcon_station = new BMap.Icon("images/ic_site.png", new BMap.Size(22,35),img_station_opts);
		var myIcon_car = new BMap.Icon("images/a1/ic_bus.png", new BMap.Size(29,38),img_car_opts);
		var marker1 = new BMap.Marker(pt_station,{icon:myIcon_station});  // 创建标注1  车站
		var marker2 = new BMap.Marker(pt_car,{icon:myIcon_car});  // 创建标注2  车 
		
		map.addOverlay(marker1);              // 将标注车站添加到地图中
		map.addOverlay(marker2);              // 将标注车添加到地图中
		
		var points = [                          //创建2个点
		    pt_station,
		    pt_car
		];
		map.setViewport(points);
		
		var res_sdd = data.res.address;
		if(res_sdd.length>19){
			res_sdd = res_sdd.substring(0,19)+'...';
		}
		
		var html = ['<div class="infoBoxContent ub ub-ac">'
					+ '<div class="div1">'
						+ '<span style="color:#999999;">上车点：</span>'
						+ '<span>'+res_sdd+'</span>'
						
					+ '</div>'
					+ '<div ontouchstart="zzzz('+data.res.latitude+','+data.res.longitude+')" class="div2">导<br>航</div>'
				+ '</div>'];
			var infoBox = new BMapLib.InfoBox(map,html.join(""),{
				boxStyle:{
					width: "2.1rem",
					height: "0.533rem"
				},
				enableAutoPan: false,
				closeIconMargin: "0",
				closeIconUrl: "images/a1/rectangle.png",
				closeIconRight: "100px",
				align: INFOBOX_AT_TOP
			});
		infoBox.open(marker1);
	
	}
	//点击导航跳转百度地图
	function zzzz(latitude,longitude){
		var geolocation = new BMap.Geolocation();
		geolocation.getCurrentPosition(function(r){

			var alatlng={lat:r.point.lat,lng:r.point.lng}
			var blatlng={lat:latitude,lng:longitude}
			var start = {
		        latlng:alatlng
			}
			var end = {
				latlng:blatlng
			}
			
			var opts = {
				mode:BMAP_MODE_DRIVING,
				region:"中国"
			}
			var ss = new BMap.RouteSearch();
			ss.routeCall(start,end,opts);
		},{enableHighAccuracy: true})
		
	}
	
	
	function show_bus(){
		if($("#on_off").attr("src")=="images/a1/enter_on.png"){
			$("#bus_pic").show();
			$("#on_off").attr("src","images/a1/enter_off.png");
		}else{
			$("#bus_pic").hide();
			$("#on_off").attr("src","images/a1/enter_on.png");
		}
	}
</script>