支付宝赞助帐号:service@kuitao8.com 

php获取步行的轨迹

Created2015-11-19   Views 3083    Author 懒人程序

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  5.     <title>获取轨迹</title> 
  6.     <script src="/js/jquery-1.10.2.min.js" type="text/javascript"></script> 
  7.     <link rel="stylesheet" type="text/css" href="http://developer.amap.com/Public/css/demo.Default.css" /> 
  8.     <style type="text/css"> 
  9.         html{height:100%} 
  10.         body{height:100%;margin:0px;padding:0px;overflow:hidden} 
  11.         #iCenter{height:99%;width:99%} 
  12.     </style > 
  13.     <script language="javascript" src="http://webapi.amap.com/maps?v=1.3&key=您网站的key"></script> 
  14.     <script language="javascript"> 
  15.         var polyline; 
  16.         var lngX =114.025974; 
  17.         var latY = 22.546054; 
  18.         var list = eval('[{"accuracy":12,"latitude":44.550365,"longitude":120.898041,"altitude":0,"speed":0,"bearing":10,"time":1445264427000},{"accuracy":12,"latitude":44.550365,"longitude":120.898041,"altitude":0,"speed":0,"bearing":10,"time":1445265147000},{"accuracy":12,"latitude":44.550365,"longitude":120.898041,"altitude":0,"speed":0,"bearing":10,"time":1445265167000},{"accuracy":12,"latitude":44.550365,"longitude":120.898041,"altitude":0,"speed":0,"bearing":10,"time":1445265167000},{"accuracy":12,"latitude":44.550365,"longitude":120.898041,"altitude":0,"speed":0,"bearing":10,"time":1445265347000},{"accuracy":12,"latitude":44.550365,"longitude":120.898041,"altitude":0,"speed":0,"bearing":10,"time":1445265347000},{"accuracy":12,"latitude":44.550365,"longitude":120.898041,"altitude":0,"speed":0,"bearing":10,"time":1445265407000},{"accuracy":12,"latitude":44.550365,"longitude":120.898041,"altitude":0,"speed":0,"bearing":10,"time":1445265407000},{"accuracy":12,"latitude":44.550365,"longitude":120.898041,"altitude":0,"speed":0,"bearing":10,"time":1445265527000},{"accuracy":12,"latitude":44.550365,"longitude":120.898041,"altitude":0,"speed":0,"bearing":10,"time":1445265947000},{"accuracy":12,"latitude":44.550365,"longitude":120.898041,"altitude":0,"speed":0,"bearing":10,"time":1445266066000}]'); 
  19.         if(list[0]){ 
  20.             lngX = list[0]['longitude']; 
  21.             latY = list[0]['latitude']; 
  22.         } 
  23.         var mapObj; 
  24.         //初始化地图对象,加载地图 
  25.         function mapInit(){ 
  26.             mapObj = new AMap.Map("iCenter",{ 
  27.                 //二维地图显示视口 
  28.                 view: new AMap.View2D({ 
  29.                     center:new AMap.LngLat(lngX,latY),//地图中心点 
  30.                     zoom:17 //地图显示的缩放级别 
  31.                 }), 
  32.                 continuousZoomEnable:false 
  33.             }); 
  34.             AMap.event.addListener(mapObj,"complete",completeEventHandler); 
  35.         } 
  36.  
  37.         //地图图块加载完毕后执行函数 
  38.         function completeEventHandler(){ 
  39.             var locType = $("input:checked").val(); 
  40.             lineArr = new Array(); 
  41.             for (var i = 0; i < list.length; i++){ 
  42.                 var item = list[i]; 
  43.                 if(locType){ 
  44.                     if(locType==item['provider']){ 
  45.                         var latlng = new AMap.LngLat(item['longitude'],item['latitude']); 
  46.                         lineArr.push(latlng); 
  47.                     } 
  48.                 }else{ 
  49.                     var latlng = new AMap.LngLat(item['longitude'],item['latitude']); 
  50.                     lineArr.push(latlng); 
  51.                 } 
  52.  
  53.             } 
  54.  
  55.             marker = new AMap.Marker({ 
  56.                 map:mapObj, 
  57.                 //draggable:true, //是否可拖动 
  58.                 position:lineArr[lineArr.length-1],//基点位置 
  59.                 icon:"http://code.mapabc.com/images/car_03.png", //marker图标,直接传递地址url 
  60.                 offset:new AMap.Pixel(-26,-13), //相对于基点的位置 
  61.                 autoRotation:true 
  62.             }); 
  63.             //绘制轨迹 
  64.             polyline = new AMap.Polyline({ 
  65.                 map:mapObj, 
  66.                 path:lineArr, 
  67.                 strokeColor:"#00A",//线颜色 
  68.                 strokeOpacity:1,//线透明度 
  69.                 strokeWeight:3,//线宽 
  70.                 strokeStyle:"solid"//线样式 
  71.             }); 
  72.             mapObj.setFitView(); 
  73.         } 
  74.         function startAnimation() { 
  75.             marker.moveAlong(lineArr,500); 
  76.         } 
  77.         function stopAnimation() { 
  78.             marker.stopMove(); 
  79.         } 
  80.  
  81.         $().ready(function(){ 
  82.             $("input[name='loc_type']").click(function(){ 
  83.                 polyline.setMap(null); 
  84.                 marker.setMap(null); 
  85.                 completeEventHandler(); 
  86.             }); 
  87.         }); 
  88.     </script> 
  89.     <script type="text/javascript"> 
  90.  
  91.     </script> 
  92. </head> 
  93. <body onLoad="mapInit()"> 
  94. <div id="iCenter"></div> 
  95. <div style="position:absolute;left:20px;top:10px;font-size:12px"> 
  96.     <input type="radio" name="loc_type" checked="checked" value=""/>ALL 
  97.     <input type="radio" name="loc_type" value="G"/>GPS 
  98.     <input type="radio" name="loc_type" value="N"/>NETWORK 
  99. </div> 
  100. <div style="position:absolute;left:40%;bottom:60px;font-size:12px"> 
  101.     <input type="button" value="开始" onclick="startAnimation()"/> 
  102.     <input type="button" value="停止" onclick="stopAnimation()"/> 
  103. </div> 
  104. </body> 
  105. </html> 

 


上一篇: php在线执行的实现原理
下一篇: windows redis服务端下载
支持键盘 ← →

邮件订阅

订阅我们的精彩内容