java百度地图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"/>

<script type="text/javascript" src="<%=path%>/js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="<%=path%>/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="<%=path%>/My97DatePicker/calendar.js"></script>
<script type="text/javascript" src="<%=path%>/My97DatePicker/config.js"></script>

<script type="text/javascript"
            src="http://api.map.baidu.com/api?v=1.4"></script>
<script type="text/javascript"> 
  
  var marker = null;
        var timerId = null;
        var counter = 0;
        var maplet = null; 
        function initMap() {        
            var map = new BMap.Map("allmap");
   map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
   map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件   
   map.enableScrollWheelZoom();
   map.enableContinuousZoom();

    <% 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);
            map.addOverlay(polyline);
           
            var myP1 = new BMap.Point(<%=positionVo.getLongitude()%>,<%=positionVo.getLatitude()%>);
             var myP2 =      
                <%       
                 positionVo = (PositionVo)searchList.get(0); if(0 < searchList.size() -1){%>
                  new BMap.Point(<%=positionVo.getLongitude()%>,<%=positionVo.getLatitude()%>)
                  
                 <%}%>;
            // 缩放地图将线路调整到可视范围内。 
            map.setCenter(myP1);
            var marker1 = new BMap.Marker(myP1);  // 创建标注
   map.addOverlay(marker1);
   var marker2 = new BMap.Marker(myP2);  // 创建标注
   map.addOverlay(marker2);    
   var lab1 = new BMap.Label("终点",{position:myP1});        //创建3个label 
            var lab2 = new BMap.Label("起点",{position:myP2});
            map.addOverlay(lab1); 
            map.addOverlay(lab2);
                 <%-- //var myP2 = new BMap.Point(114.516998,38.053199);    //起点
//var myP1 = new BMap.Point(114.517,38.0532);    //终点
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;    //获得有几个点

        var carMk = new BMap.Marker(pts[0],{icon:myIcon});
        map.addOverlay(carMk);
        i=0;
        function resetMkPoint(i){
            carMk.setPosition(pts[i]);
           
            if(i < paths){
                setTimeout(function(){
                    i++;
                    resetMkPoint(i);
                },200);
            };
        }
        setTimeout(function(){
            resetMkPoint(5);
        },200)

    });
}

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>
---------------------------------------------------------------------------------------

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>标注沿折线运动</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
</head>
<body>
<div style="1320px;height:640px;border:1px solid gray" id="container"></div>
<input type='button' value='开始' onclick='run();' />
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
var myP1 = new BMap.Point(116.371801,39.912114);    //起点
var myP2 = new BMap.Point(116.447804,39.913123);    //终点
var myIconmove = new BMap.Icon("http://dev.baidu.com/wiki/static/map/API/examples/images/Mario.png", 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: false}});    //驾车实例
//driving2.search(myP1, myP2);    //显示一条公交线路

//添加起标志
//添加终标志
var point = new BMap.Point(116.401801,39.912114);

//添加起标志
//添加终标志
var myIcon = new BMap.Icon("http://api.map.baidu.com/img/dest_markers.png",new BMap.Size(28, 32),  {     offset: new BMap.Size(10, 25),  imageOffset: new BMap.Size(0, 0)  });   
var myIcon2 = new BMap.Icon("http://api.map.baidu.com/img/dest_markers.png",new BMap.Size(28, 32),  {     offset: new BMap.Size(-150, -205),  imageOffset: new BMap.Size(0, -34)  });
 
var point2 =  new BMap.Point(116.423184,39.930323);
var marker = new BMap.Marker(point, {icon: myIcon});  // 创建标注
var marker2 = new BMap.Marker(point2, {icon: myIcon2});  // 创建标注
map.addOverlay(marker);              // 将标注添加到地图中
map.addOverlay(marker2);
marker.setAnimation(BMAP_ANIMATION_DROP ); //跳动的动画
marker2.setAnimation(BMAP_ANIMATION_DROP ); //跳动的动画

var polyline = new BMap.Polyline([
new BMap.Point(116.401801,39.912114),
    new BMap.Point(116.403803,39.912336),
    new BMap.Point(116.404804,39.912447),
    new BMap.Point(116.405905,39.918558),
    new BMap.Point(116.418804,39.926123),
    new BMap.Point(116.419184,39.929323),
    new BMap.Point(116.423184,39.930323)
], {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5});
map.addOverlay(polyline);

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();    //通过驾车实例，获得一系列点的数组
        pts = [                          //创建7个点
   new BMap.Point(116.401801,39.912114),
    new BMap.Point(116.403803,39.912336),
    new BMap.Point(116.404804,39.912447),
    new BMap.Point(116.405905,39.918558),
    new BMap.Point(116.418804,39.926123),
    new BMap.Point(116.418904,39.926223),
    new BMap.Point(116.419184,39.929323),
    new BMap.Point(116.423184,39.930323)
];
  
  
  var paths = pts.length;    //获得有几个点
        
  //alert(pts.toString());
        var carMk = new BMap.Marker(pts[0],{icon:myIconmove});
        map.addOverlay(carMk);
        i=0;
        function resetMkPoint(i){
            carMk.setPosition(pts[i]);
            if(i < paths){
                setTimeout(function(){
                    i++;
                    resetMkPoint(i);
                },500);
            }else{map.removeOverlay(carMk);}
        }
        setTimeout(function(){
            resetMkPoint(0);
        },800)

    });
}
</script>

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