nizongfeng
/
XMWX

<!DOCTYPE HTML>
<html style="height:100%;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui" />
<title>行车路线</title>
</head>
	<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"/>
	<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<style type="text/css" rel="stylesheet">
	header{position:absolute;height:60px;top:0;width:100%;background-color:#F4F4F4;z-index:999;text-align:center;line-height:60px;color:#666666;font-weight:bold;border-bottom:1px solid #BBBBBB;}
	header div:nth-child(1){position:absolute;z-index:1000;width:40px;cursor:pointer;}
	header div:nth-child(1) img{width:40px;height:40px;margin-left:3px;margin-top:10px;}
	header div:nth-child(2){width:100%}
	html body{height:100%;margin:0;font-family: "微软雅黑";}
	#map{height:100%!important;position:absolute;top:0px;width:100%;font-family: "微软雅黑";}
	.float_div{cursor:pointer;border-radius:3px;text-align:center;line-height:50px;background-color:#008CFF;width:60px;height:45px;position:absolute;z-index:888;right:5px;color: #fff;}
	#localtion{bottom:80px;}
	#panner{opacity:0.8;width:100%;height:140px;position:absolute;bottom:0;z-index:17;font-size:12px;color:#fff;}
	#visit{bottom:20px;}
	.amap-geolocation-con{
		position: fixed!important;
	}
</style>
<body>
	<div style="width: 100%;height: 0.5rem;position: fixed;z-index: 2;top: 0;background-color: rgba(0,0,0,0.6);line-height: 0.5rem;">
		<img style="width: 0.12rem;margin-left: 0.2rem;" src="images/a3/img_pro_d.png"/>
		<span style="color: #ccc;font-size: 0.14rem;margin-left: 0.05rem;" id="bus_name">罗师傅</span>
		<span style="color: #eee;font-size: 0.14rem;margin-left: 0.1rem;" id="bus_num">沪A12345</span>
		<a style="height: 0.5rem;width: 0.5rem;float: right;text-align: center;line-height: 0.65rem;" id="call_phone" href="tel:"><img style="text-align: right;height: 0.22rem;" src="images/a1/ic_call.png"/></a>
	</div>
	<div style="display: none;" id="panner">
		<div id="r_title"><b>定位结果:</b></div>
	    <div id="result">jkhdehdkhdkwqkd</div>
	</div>
	<!--<div class="float_div" id="visit">
		监控
	</div>-->
	
	
	<div id="map"></div>	
</body>
<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 language="javascript" src="http://webapi.amap.com/maps?v=1.3&key=5aa97c3a4c10064f8cfbace9f139ac49"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript">
	var bus_num = getStorage("bus_num");
	var bus_name = getStorage("bus_name");
	var bus_phone = getStorage("bus_phone");
	$("#call_phone").attr("href","tel:"+bus_phone);
	$("#bus_name").text(bus_name);
	$("#bus_num").text(bus_num);
var jing = "";
var wei = "";
	(function (){
		var mapHeight = document.body.clientHeight - 200;
		document.getElementById('map').style.height = mapHeight + 'px';
		var map = new AMap.Map('map',{zoom:13,resizeEnable: true,panToLocation:true}), geolocation, result = document.getElementById('result');
		setInterval(show1,10000);		
			    
		map.plugin('AMap.Geolocation', function () {
			geolocation = new AMap.Geolocation({
				enableHighAccuracy: true,//是否使用高精度定位，默认:true
				noIpLocate:true,
				timeout: 10000,          //超过10秒后停止定位，默认：无穷大
				maximumAge: 0,           //定位结果缓存0毫秒，默认：0
				convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
				showButton: true,        //显示定位按钮，默认：true
				buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
				buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
				showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
				showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
				//panToLocation: false,     //定位成功后将定位到的位置作为地图中心点，默认：true
				zoomToAccuracy:false,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
				zoom:15
			});
		
				
	        map.addControl(geolocation);
	       // geolocation.getCurrentPosition();
	        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
			AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
			
		});
		watchPosition ();
		
		/*
		 *获取当前位置信息
		 */
		function getCurrentPosition () {
			geolocation.getCurrentPosition();
		};
		/*
		 *监控当前位置并获取当前位置信息
		 */
		function watchPosition () {
			geolocation.watchPosition();
		};
		/*
		 *解析定位结果
		 */
		function onComplete (data) {
			
//			var str = '<p>定位成功</p>';
//			str += '<p>经度：' + data.position.getLng() + '</p>';
//			str += '<p>纬度：' + data.position.getLat() + '</p>'; 
//			str += '<p>精度：' + data.accuracy + ' 米</p>';
//			str += '<p>是否经过偏移：' + (data.isConverted ? '是' : '否') + '</p>';
//			result.innerHTML = str;
		};
		/*
		 *解析定位错误信息
		 */
		function onError (data) {
			
			var str = '定位失败';
			switch(data.info) {
				case 'PERMISSION_DENIED':
					alert('定位失败,浏览器阻止了定位操作');
					str += '浏览器阻止了定位操作';
					break;
				case 'POSITION_UNAVAILBLE':
					alert('定位失败,无法获得当前位置');
					str += '无法获得当前位置';
					break;
				case 'TIMEOUT':
					alert('定位失败,定位超时');
					str += '定位超时';
					break;
				default:
					alert('定位失败,未知错误');
					str += '未知错误';
					break;
			}
			str += '</p>';
			result.innerHTML = str;
		};
		function show1(){
			map.clearMap();
		    geolocation.getCurrentPosition();
			$.ajax({ 
		        url:"./zz_wxsct/control.php", 
		        type:'post',
		        dataType: "json",
		        data:{bus_no:bus_num,type:"travel_getposition",driver_name:bus_name},
		        success : function(data) {
		       	 	
		          	console.log(data);
		          	if(data.code=="0"){
		          		
		          		jing = data.list.j;
						wei = data.list.w;
						
//						marker.setMap(position(jing,wei))
		          		marker = new AMap.Marker({
				        map: map,
						position: [jing,wei],
				        icon: new AMap.Icon({            
				            size: new AMap.Size(40, 40),  //图标大小
				            image: "images/a1/car.png",
				            imageOffset: new AMap.Pixel(0, 0)
				        })  
				       
				    });
//				    		marker.setPosition(new AMap.LngLat( data.list.j,data.list.w));
//				    		jing = data.list.j;
//						wei = data.list.w;
				      //更新点标记位置 
		          	}else{
		          		alert(data.info);
		          	}
		        }
		    });
		    
		}
		
		
		document.getElementById('visit').onclick = function(){
			watchPosition();
		};
		
	})();
</script>
</html>