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


    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>

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

     

     

  • 相关阅读:
    Pascal Analyzer 4 代码分析使用简要说明
    界面动态配置:持久化反持久化
    (Sql Server)数据的拆分和合并
    javascript中的promise和deferred:实践(二)
    对面向接口编程、按分层建项目的反思和新的分层结构思路
    revel框架教程之权限控制
    等待与通知机制
    实现代码编辑器
    自定义html标签
    javascript生成自定义的arcgis simpletoolbar
  • 原文地址:https://www.cnblogs.com/liuzhuqing/p/7480473.html
Copyright © 2020-2023  润新知