javascript百度和高德地图api轨迹回放

------------------------------------------------------------------------------------------------

<%@ page language="java"
import="java.util.*,java.text.SimpleDateFormat,com.teletek.soo8web.common.vo.*,com.teletek.soo8web.common.util.*"
pageEncoding="GBK"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<jsp:include page="/common/header.jsp" flush="true">
<jsp:param value="4" name="menu"/>
</jsp:include>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>

    <% List searchList = (List)request.getAttribute("searchList");
                 if(searchList !=null && !searchList.isEmpty()){
                 PositionVo positionVo = null;%>
            var polyline = new BMap.Polyline(
                [
                <%for(int i = 0; i < searchList.size(); i++){
                positionVo = (PositionVo)searchList.get(i); if(i < searchList.size() -1){%>
                  new BMap.Point(<%=positionVo.getLongitude()%>,<%=positionVo.getLatitude()%>),

                <%}else{%>
                new BMap.Point(<%=positionVo.getLongitude()%>,<%=positionVo.getLatitude()%>)
                <%}%>

                <%}%>
                ],
                {strokeColor:"red", strokeWeight:6, strokeOpacity:0.5}

                //new BMap.MBrush()
              );

             //polyline.push(point);
   //maplet.setViewport(polyline);
            //maplet.addOverlay(polyline);

            var myP2 = new BMap.Point(<%=positionVo.getLongitude()%>,<%=positionVo.getLatitude()%>);


   var myP1 =

                <%
                positionVo = (PositionVo)searchList.get(0); if(0 < searchList.size() -1){%>
                  new BMap.Point(<%=positionVo.getLongitude()%>,<%=positionVo.getLatitude()%>)

                <%}%>;

      //var myP1 = new BMap.Point(114.52214,38.058823);    //起点
//var myP2 = new BMap.Point(114.52219,38.058826);    //终点
var myIcon = new BMap.Icon("<%=path%>/images/map_friend.gif", new BMap.Size(32, 70), {    //小车图片
    //offset: new BMap.Size(0, -5),    //相当于CSS精灵
    imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
});

var driving2 = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});    //驾车实例
driving2.search(myP1, myP2);    //显示一条公交线路

window.run = function (){
    var driving = new BMap.DrivingRoute(map);    //驾车实例
    driving.search(myP1, myP2);

    driving.setSearchCompleteCallback(function(){

        var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组
        var paths = pts.length;    //获得有几个点

});
}

setTimeout(function(){
run();
},1500);

       <%}else{%>
  alert("好友在你选择的时间段内未上传足迹");
  <%}%>
            }

function checkForm(){
  var isPass = true;
  var startTime = $("#startTime").val();
  var endTime = $("#endTime").val();
  var   st=new Date(Date.parse($("#startTime").val().replace(/-/g,   "/")));
  var   et= new Date(Date.parse($("#endTime").val().replace(/-/g,   "/")));
  var dt=(et.getTime()-st.getTime())/86400000;
  //alert(dt);
  if(startTime == "" || endTime == ""){
  alert("请输入开始时间和结束时间");
      $("#startTime").focus();
   $("#endTime").focus();
  isPass = false;
  }else if(startTime >= endTime) {

   alert("开始时间不能大于结束时间");
   $("#startTime").focus();
   $("#endTime").focus();
   isPass = false;
  }else if(dt > 1) {

   alert("请输入一天之内的时间");
   isPass = false;
  }else if(startTime == "请输入开始时间" || endTime == "请输入结束时间"){
  alert("请输入开始时间和结束时间");
      $("#startTime").focus();
   $("#endTime").focus();
   isPass = false;
  }else{
  isPass = true;
  }
  return isPass;
}

    </script>

</head>
<body onload="initMap()">

<div id="content">
     <div style="height:18px;"></div>
<form id="form1" method="post" action="<%=path%>/track.action" onsubmit="return checkForm()">
<div class="main2">
<div class="search">
<h1><s:property value="friendNickname" />的足迹</h1>
     </div>

  <div class="map">
   <div id="allmap" style="1000px;height:500px">

   </div>

</div>
<div class="track">
     <ul>
     <li>请选择回放时间<input type="text" id="startTime" name="startTime" value="请输入开始时间" class="input-track" onclick="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})"/>
至<input type="text" id="endTime" name="endTime" value="请输入结束时间" class="input-track" onclick="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})"/></li>
     <li><input type="submit" value="" class="track-button" /></li>
     <li class="margin_l15">友情提示：查询足迹，只限24小时内对单个对象进行查询</li>

     </ul>
     <input type="hidden" name="friendNickname" value="<s:property value="friendNickname" escape="false"/>"/>
     <input type="hidden" name="condition" value="<s:property value="condition" />"/>
     <input type="hidden" name="flag" value="1"/>
   </div>

</div></form></div>
<jsp:include page="/common/footer.jsp"/>
</body>
</html>

----------------------------------------------------------------------------------------------

<%@ page language="java"
import="java.util.*,java.text.SimpleDateFormat,com.teletek.soo8web.common.vo.*,com.teletek.soo8web.common.util.*"
pageEncoding="GBK"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<jsp:include page="/common/header.jsp" flush="true">
<jsp:param value="4" name="menu"/>
</jsp:include>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>

              );

              var myP2 = new MLngLat(<%=positionVo.getLongitude()%>,<%=positionVo.getLatitude()%>);


   var myP1 =

                <%
                positionVo = (PositionVo)searchList.get(0); if(0 < searchList.size() -1){%>
                  new MLngLat(<%=positionVo.getLongitude()%>,<%=positionVo.getLatitude()%>);

                <%}%>;


              //lngX=116.28890991210938;
//latY=39.85019377385963;
   var markerOption = new MMarkerOptions();
markerOption.imageUrl ="http://code.mapabc.com/images/car_03.png";
markerOption.picAgent=false;
var labelOption = new MLabelOptions();
labelOption.content="GPScar";
markerOption.labelOption=labelOption;
var marker = new MMarker(myP1,markerOption);
marker.id="mark";
mapObj.addOverlay(marker,true);

lineArr= new Array();
    lineArr.push(myP1);
for (var i = 1; i <50; i++){
  //lngX=116.48117065429688;

  //latY=40.060731050581396;

  lineArr.push(myP2);
}

var linest = new MLineStyle();
linest.alpha = 1;
linest.color = 0xFF3300 ;
linest.thickness = 3;
var lineopt = new MLineOptions();
lineopt.lineStyle = linest;
lineopt.canShowTip = false;
var PolylineAPI = new MPolyline(lineArr,lineopt); //使用自定义的样式时用这个
PolylineAPI.id = "polyline101";
mapObj.addOverlay(PolylineAPI) ;

var arr=new Array();
arr.push("mark");
mapObj.setGPSFocus(MConstants.FOCUS,arr);
mapObj.markerMoveAlong("mark",lineArr,2);
mapObj.startMoveAlong("mark",true);




              <%}else{%>
  alert("好友在你选择的时间段内未上传足迹");
  <%}%>

}

</head>
<body onload="mapInit()">

<div id="content">
     <div style="height:18px;"></div>
<form id="form1" method="post" action="<%=path%>/track.action" onsubmit="return checkForm()">
<div class="main2">
<div class="search">
<h1><s:property value="friendNickname" />的足迹</h1>
     </div>

  <div class="map">
   <div id="map" style="1000px;height:500px">

</div>

</div>
<div class="track">
     <ul>
     <li>请选择回放时间<input type="text" id="startTime" name="startTime" value="请输入开始时间" class="input-track" onclick="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})"/>
至<input type="text" id="endTime" name="endTime" value="请输入结束时间" class="input-track" onclick="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})"/></li>
     <li><input type="submit" value="" class="track-button" /></li>
     <li class="margin_l15">友情提示：查询足迹，只限24小时内对单个对象进行查询</li>

     </ul>
     <input type="hidden" name="friendNickname" value="<s:property value="friendNickname" escape="false"/>"/>
     <input type="hidden" name="condition" value="<s:property value="condition" />"/>
     <input type="hidden" name="flag" value="1"/>
   </div>

</div></form></div>
<jsp:include page="/common/footer.jsp"/>
</body>
</html>

--------------------------------------------------------------------------------------------

<%@ page language="java"
import="java.util.*,java.text.SimpleDateFormat,com.teletek.soo8web.common.vo.*,com.teletek.soo8web.common.util.*"
pageEncoding="GBK"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<jsp:include page="/common/header.jsp" flush="true">
<jsp:param value="4" name="menu"/>
</jsp:include>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>

              );

              var myP2 = new MMap.LngLat(<%=positionVo.getLongitude()%>,<%=positionVo.getLatitude()%>);

   var myP1 =

                <%
                positionVo = (PositionVo)searchList.get(0); if(0 < searchList.size() -1){%>
                  new MMap.LngLat(<%=positionVo.getLongitude()%>,<%=positionVo.getLatitude()%>);

                <%}%>;

var bounds = new MMap.Bounds(myP1,myP2); //创建 MMap.Bounds 新实例
mapObj.setBounds(bounds);//设置当前地图的经纬度范围。即地图视图可视矩形区域的西南、东北角的经纬度坐标。

//添加运行轨迹
var polyline,arrSE;
var path = new Array();
var arrOverlays = new Array();
var marker;
var route = new MMap.RouteSearch();//构造驾车导航实例
arrSE = new Array();//设置起止点坐标
  arrSE.push(myP2);
  arrSE.push(myP1);
route.getNaviPath(arrSE,function(data){//驾车导航
  if(data.status=='E0'){
   //定义轨迹
   var s='',coors='';
   for(var i=0,l=data.count;i<l;i++){
    coors+=data.list[i].coor+';'
   }

   path = dataEdit(coors);
   path.unshift(myP2);
   path.push(myP1);
   polyline = new MMap.Polyline({
    id:"polyline",
    path:path,
    strokeColor:"#3366CC",
   strokeOpacity:0.8,
   strokeWeight:6
   });
   //定义起止点
   var a=arrSE;
   var start=a[0],end=a[a.length-1];
   var markerStart = new MMap.Marker({
    id:'start',
    icon:'http://code.mapabc.com/images/qd.png',
    offset:{x:-8,y:-9},
    position:arrSE[0]
   });
   var markerEnd = new MMap.Marker({
    id:'end',
    icon:'http://code.mapabc.com/images/zd.png',
    offset:{x:-8,y:-9},
    position:arrSE[arrSE.length-1]
   });
   //在地图上添加轨迹和起止点
   arrOverlays.push(polyline);
   arrOverlays.push(markerStart);
   arrOverlays.push(markerEnd);
   mapObj.addOverlays(arrOverlays);
   mapObj.setFitView(arrOverlays);

   //点沿轨迹运行

  marker = new MMap.Marker({
   id:"car",
   position:arrSE[0],
   icon:"http://code.mapabc.com/images/car_03.png",
   offset:{x:-26,y:-13}
  });
  mapObj.addOverlays(marker);
  //设置moveAlong参数
  var speed=10;
  var func ="";
   if (func ==""){func=null;}


  marker.moveAlong(path,speed,func,false);//点沿轨迹运动
  mapObj.panTo(marker.getPosition());//移动地图到轨迹初始点
  }
})

              <%}else{%>
  alert("好友在你选择的时间段内未上传足迹");
  <%}%>

}

function dataEdit(s){//返回坐标数组
if(s.charAt(s.length-1)==';')s=s.substring(0,s.length-1)
var a=s.split(';');
var b=[];
for(var i=0,l=a.length;i<l;i++){
var c=a[i].split(',');
b.push(new MMap.LngLat(c[0],c[1]));
}
return b;
}

</head>
<body onload="mapInit()">

<div id="content">
     <div style="height:18px;"></div>
<form id="form1" method="post" action="<%=path%>/track.action" onsubmit="return checkForm()">
<div class="main2">
<div class="search">
<h1><s:property value="friendNickname" />的足迹</h1>
     </div>

  <div class="map">
   <div id="map" style="1000px;height:500px">

</div>

</div>
<div class="track">
     <ul>
     <li>请选择回放时间<input type="text" id="startTime" name="startTime" value="请输入开始时间" class="input-track" onclick="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})"/>
至<input type="text" id="endTime" name="endTime" value="请输入结束时间" class="input-track" onclick="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})"/></li>
     <li><input type="submit" value="" class="track-button" /></li>
     <li class="margin_l15">友情提示：查询足迹，只限24小时内对单个对象进行查询</li>

     </ul>
     <input type="hidden" name="friendNickname" value="<s:property value="friendNickname" escape="false"/>"/>
     <input type="hidden" name="condition" value="<s:property value="condition" />"/>
     <input type="hidden" name="flag" value="1"/>
   </div>

</div></form></div>
<jsp:include page="/common/footer.jsp"/>
</body>
</html>

--------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>实时追踪</title>

<script language="javascript" src="http://app.mapabc.com/apis?t=javascriptmap&v=3.1.1&key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3"></script>
<script language="javascript">

var mapObj;
function mapInit(){
mapObj = new MMap.Map("iCenter");
moveAlong();
}
var marker;

function moveAlong(){
mapObj.clearMap();
var axxdfdf = "116.37388157654,39.907409934248";
var lls = axxdfdf.split(",");//起点坐标
var bfdsadsfasd = "115.1337484,39.13324";
var lld = bfdsadsfasd.split(",");//终点坐标
var speed=200;
var f ="";
if (f ==""){f=null;}
var lineArr = new Array(); //线经纬度数组
lineArr.push(new MMap.LngLat(lls[0],lls[1]));
lineArr.push(new MMap.LngLat(116.45388157654,39.907409934248));
lineArr.push(new MMap.LngLat(116.40388157654,39.807409934248));
lineArr.push(new MMap.LngLat(116.55388157654,39.707409934248));
lineArr.push(new MMap.LngLat(116.30388157654,39.600409934248));
lineArr.push(new MMap.LngLat(116.25388157654,39.500409934248));
lineArr.push(new MMap.LngLat(116.50388157654,39.700409934248));
lineArr.push(new MMap.LngLat(116.15388157654,39.300409934248));
lineArr.push(new MMap.LngLat(116.10388157654,39.201409934248));
lineArr.push(new MMap.LngLat(116.75388157654,39.102409934248));
lineArr.push(new MMap.LngLat(116.40388157654,39.903409934248));
lineArr.push(new MMap.LngLat(lld[0],lld[1]));
var polyline=new MMap.Polyline({
id:"polyline01",
path:lineArr,//线经纬度数组
editable:true,//是否可编辑
strokeColor:"#F00",//线颜色
strokeOpacity:0.8,//线透明度
strokeWeight:3,//线宽
strokeStyle:"dashed",//线样式
strokeDasharray:[10,5]//补充线样式
});
mapObj.addOverlays(polyline);
//marker = new MMap.Marker({
// id:"car",//id
// position:new MMap.LngLat(lls[0],lls[1]),//位置
// icon:"http://apiv3.test.mapabc.com/Images/car.png",//图标
// offset:{x:-26,y:-13}//相对于基点的偏移量
//});
//mapObj.addOverlays(marker);
addMarker(lineArr);
//marker.moveAlong(lineArr,speed,f);//按线路移动点
var inforWindow = new MMap.InfoWindow({//点的信息窗体
content:"this is gps car"//内容
});
mapObj.bind(marker,"click",function(e){
inforWindow.open(mapObj,marker.getPosition());
});
mapObj.bind(marker,"moving",function(e){
inforWindow.setPosition(marker.getPosition());
});
mapObj.panTo(marker.getPosition());
mapObj.bind(marker,"moving",function(e){
var lnglat = marker.getPosition();
var bounds = mapObj.getBounds();
if(lnglat.lng <= bounds.southwest.lng || lnglat.lng>=bounds.northeast.lng || lnglat.lat<=bounds.southwest.lat || lnglat.lat>=bounds.northeast.lat){
mapObj.panTo(lnglat);
}
});
}

// 创建marker
function addMarker(lineArr) {
for ( var ki = 0; ki < lineArr.length; ki++) {
var p0 = lineArr[ki].lng;
var p1 = lineArr[ki].lat;
var point = new MMap.LngLat(p0, p1);
var iconImg = createIcon("");
var marker = new MMap.Marker({
id : ki,
offset:new MMap.Pixel(-10,-32),
position : point,
icon : iconImg
}); // 自定义构造MMap.Marker对象
mapObj.addOverlays(marker);
createInfoWindow(ki, marker, 5);
}
}

// 创建InfoWindow
function createInfoWindow(i, marker, zoom) {
var info = [];
var adStr = "这个点"+(i+1);
info.push(adStr);
var iw = new MMap.InfoWindow({
content : info.join(""),
offset : new MMap.Pixel(-105, -85),
isCustom : false,
autoMove : true
});
mapObj.bind(marker, "click", function(e) {
iw.open(mapObj, marker.getPosition());
});
}
// 创建一个Icon
function createIcon(json) {
var opt = {};
opt.size = new MMap.Size(28, 37);
icon = new MMap.Icon(opt);// 构造自定义MMap.Icon对象
return icon;
}
</script>
</head>
<body onload="mapInit();">
<div id="iCenter" style=" 1200px;height:300px"></div>
</body>
</html>

---------------------------------------------------------------------------------------

相关阅读:
Pascal Analyzer 4 代码分析使用简要说明
界面动态配置：持久化反持久化
(Sql Server)数据的拆分和合并
javascript中的promise和deferred：实践（二）
对面向接口编程、按分层建项目的反思和新的分层结构思路
revel框架教程之权限控制
等待与通知机制
实现代码编辑器
自定义html标签
javascript生成自定义的arcgis simpletoolbar

原文地址：https://www.cnblogs.com/liuzhuqing/p/7480473.html