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

<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);
            //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;    //获得有几个点

        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>

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

 

 <%@ 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://app.mapabc.com/apis?t=flashmap&v=2.4.1&key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3|29e8ed1f7f6a97d8e99fc568cea6a7dc0ccd920856e07c0718b9885faf7551a18141699c81f526d7"></script>
<script type="text/javascript"> 
 var mapObj=null;
function  mapInit() {
 var mapoption = new MMapOptions();
 mapoption.toolbar = MConstants.ROUND; //设置地图初始化工具条，ROUND:新版圆工具条
 mapoption.overviewMap = MConstants.SHOW; //设置鹰眼地图的状态，SHOW:显示，HIDE:隐藏（默认）
 mapoption.scale = MConstants.SHOW; //设置地图初始化比例尺状态，SHOW:显示（默认），HIDE:隐藏。
 mapoption.zoom = 13;//要加载的地图的缩放级别
 mapoption.center = new MLngLat(116.397428,39.90923);//要加载的地图的中心点经纬度坐标
 mapoption.language = MConstants.MAP_CN;//设置地图类型，MAP_CN:中文地图（默认），MAP_EN:英文地图
 mapoption.fullScreenButton = MConstants.SHOW;//设置是否显示全屏按钮，SHOW:显示（默认），HIDE:隐藏
 mapoption.centerCross = MConstants.SHOW;//设置是否在地图上显示中心十字,SHOW:显示（默认），HIDE:隐藏
 mapoption.toolbarPos=new MPoint(20,20); //设置工具条在地图上的显示位置
 mapObj = new MMap("map", mapoption); //地图初始化
 
 var lngX;
 var latY;
 var lineArr ;
 
 <% List searchList = (List)request.getAttribute("searchList");
                 if(searchList !=null && !searchList.isEmpty()){
                  PositionVo positionVo = null;%>
             //var polyline = new BMap.Polyline(
             var marker = new MMarker(
                [
                <%for(int i = 0; i < searchList.size(); i++){         
                 positionVo = (PositionVo)searchList.get(i); if(i < searchList.size() -1){%>                  
                  new MLngLat(<%=positionVo.getLongitude()%>,<%=positionVo.getLatitude()%>),
                  
                 <%}else{%>
                 new MLngLat(<%=positionVo.getLongitude()%>,<%=positionVo.getLatitude()%>),
                 <%}%>
              
                <%}%>
                ],
                {strokeColor:"red", strokeWeight:6, strokeOpacity:0.5}

              );
             
              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("好友在你选择的时间段内未上传足迹");
  <%}%>
 
}

 

  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="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"/>

<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://113.31.92.200:8081/webapi/auth.json?t=ajaxmap&v=3.1.2"></script>
<script type="text/javascript"> 
 var mapObj,toolbar,overview,scale;
function  mapInit() {
//地图初始化参数设置
    var opt = {
  center: new MMap.LngLat(116.397428, 39.90923),//设置地图中心点
        level: 10,//初始地图缩放级别
        zooms:[7,17]//地图缩放级别范围
    };
    mapObj = new MMap.Map("map", opt);
 
 //加载地图基本控件
    mapObj.plugin(["MMap.ToolBar", "MMap.OverView", "MMap.Scale"],function() {
  //加载工具条插件，工具条包括方向键盘、标尺键盘和自动定位控制
        toolbar = new MMap.ToolBar();
        mapObj.addControl(toolbar);
  //加载鹰眼
        overview = new MMap.OverView();
        mapObj.addControl(overview);
  //加载比例尺
        scale = new MMap.Scale();
        mapObj.addControl(scale);
    });
  
 
 <% List searchList = (List)request.getAttribute("searchList");
                 if(searchList !=null && !searchList.isEmpty()){
                  PositionVo positionVo = null;%>             
             var marker = new MMap.Marker(
                [
                <%for(int i = 0; i < searchList.size(); i++){         
                 positionVo = (PositionVo)searchList.get(i); if(i < searchList.size() -1){%>                  
                  new MMap.LngLat(<%=positionVo.getLongitude()%>,<%=positionVo.getLatitude()%>),
                  
                 <%}else{%>
                 new MMap.LngLat(<%=positionVo.getLongitude()%>,<%=positionVo.getLatitude()%>),
                 <%}%>
              
                <%}%>
                ],
                {strokeColor:"red", strokeWeight:6, strokeOpacity:0.5}

              );
             
              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;
}

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

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