拼车路线展示工具

分手后的思念是犯贱 2024-02-19 19:20 14阅读 0赞

<!DOCTYPE HTML>
    <html>
    <head>
        <meta name="viewport" content="initial-scale=1.0,user-scalable=no">
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title>AMap Marker</title>
        <style type="text/css">
            html {
                height: 100%;
            }
    
            body {
                height: 100%;
                margin: 0px;
                padding: 0px;
            }
    
            #container {
                height: 100%;
            }
    
            p {
                margin: 10px;
            }
    
            button {
                width: 200px;
                height: 30px;
            }
        </style>
        <script type="text/javascript"
            src="http://webapi.amap.com/maps?v=1.3&key=dc43f8a62c68a793e228515d43281ed1">
        </script>
    
    </head>
    
    <body onload="initialize()">
        <p>
            <label>坐标框(逗号间隔)</label>
            <input type="text" name="CoorBox" size="120" id="LngLatCoors" />
        </p>
        <p>
            <button onclick="setMarker()">标注点并计算距离</button>
            <strong>起终点直线距离:</strong>
            <b id="distance"></b>
        </p>
        <div id="container"></div>
        <script type="text/javascript">
    
            var mapObj = null;
        //创建地图实例
            function initialize() {
                var pos = new AMap.LngLat(116.397428, 39.90923);
                mapObj = new AMap.Map("container", {
                    view: new AMap.View2D({ //创建地图二维视口
                        center: pos, //创建中心点坐标
                        zoom: 15, //设置地图缩放级别
                        rotation: 0 //设置地图旋转角度
                    })
                }); 
            }
        //时间戳转换
        function timestampToTime(timestamp) {
            var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
            var D = date.getDate() + ' ';
            var h = date.getHours() + ':';
            var m = date.getMinutes() + ':';
            var s = date.getSeconds();
            return Y+M+D+h+m+s;
        }
         //时间戳转换小时
         function timeh(timestamp) {
            var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
            var D = date.getDate() + ' ';
            var h = date.getHours() + ':';
            var m = date.getMinutes() + ':';
            var s = date.getSeconds();
            return h+m+s;
        }
        //订单顺序和订单ID绑定函数
        function sort_list_bind(order_sort_1,order_list_1)
           {
            var sort_list_bd=new Array();
            for(i=0;i<order_sort_1.length;i++)
                    {
                      if(order_sort_1[i]=='0'||order_sort_1[i]=='1')
                       {
                         sort_list_bd[i]=order_list_1[0];
                       }
                      else if(order_sort_1[i]=='2'||order_sort_1[i]=='3')
                       {
                        sort_list_bd[i]=order_list_1[1];
                       }
                      else if(order_sort_1[i]=='4'||order_sort_1[i]=='5')
                       {
                       sort_list_bd[i]=order_list_1[2];
                       }
                     else if(order_sort_1[i]=='6'||order_sort_1[i]=='7')
                      {
                       sort_list_bd[i]=order_list_1[3];
                      }
                     else if(order_sort_1[i]=='8'||order_sort_1[i]=='9')
                     {
                       sort_list_bd[i]=order_list_1[4];
                     }
                       else if(order_sort_1[i]=='10'||order_sort_1[i]=='11')
                     {
                       sort_list_bd[i]=order_list[5];
                     }
                      else if(order_sort_1[i]=='12'||order_sort_1[i]=='13')
                     {
                      sort_list_bd[i]=order_list_1[6];
                     }
                    }
            return sort_list_bd;
           }
         //分割函数
         function my_split(t,c)
         {
           var arr=new Array;
           arr=t.split(c);
           return arr;
         }
         //数据处理函数
                    var xys=[];
                    var match_mode=[];
                    var iters=[];
                    var route_group=[];
                    var is=[];
                    var str=[];//str
                    var order_cnt=[];//order_cnt
                    var order_list=[];//order_list
                    var order_sort=[];//order_sort
                    var tw=[];
                    var tw_cnt=[];
                    var tw_list=[];
                    var polynum=[];
    
        function getdata(strallcoor)
        {
                //正则表达式的替换
                strallcoor = strallcoor.replace(/;/g, ',');
                strallcoor=strallcoor.replace(/\n/g,'');
                //正则表达式分割trip条数
                polynum = my_split(strallcoor,'#');
                console.log(polynum.length);
                    
                    for (j = 0; j < polynum.length; j++)
                    {
                        xys[j]=polynum[j].toString();
                        xys[j]=xys[j].match(/xys=(\S*)match/)[1];
    
                        match_mode[j]=polynum[j].toString();
                        match_mode[j]=match_mode[j].match(/match_mode=(\S*)iter/)[1];
    
                        iters[j]=polynum[j].toString();
                        iters[j]=iters[j].match(/iter=(\S*)route_group/)[1];
    
                        route_group[j]=polynum[j].toString();
                        route_group[j]=route_group[j].match(/route_group=(\S*)i=/)[1];
    
                        is[j]=polynum[j].toString();
                        is[j]=is[j].match(/i=(\S*)str/)[1];
                        
                        str[j]=polynum[j].toString();
                        str[j]=str[j].match(/str=(\S*)order_cnt/)[1];
    
                        order_cnt[j]=polynum[j].toString();
                        order_cnt[j]=order_cnt[j].match(/order_cnt=(\S*)order_list/)[1];
                        
                        order_list[j]=polynum[j].toString();
                        order_list[j]=order_list[j].match(/order_list=(\S*)order_sort/)[1];
    
                        order_sort[j]=polynum[j].toString();
                        order_sort[j]=order_sort[j].match(/order_sort=(\S*)tw=/)[1];
    
                        tw[j]=polynum[j].toString();
                        tw[j]=tw[j].match(/tw=(\S*)tw_cnt/)[1];
                        
                        tw_cnt[j]=polynum[j].toString();
                        tw_cnt[j]=tw_cnt[j].match(/tw_cnt=(\S*)tw_list/)[1];
    
                        tw_list[j]=polynum[j].toString();
                        tw_list[j]=tw_list[j].match(/tw_list=(\S*)/)[1];
                    }
                    
          
        }
        //经纬度划分
    
    	//颜色随机生成函数
        var color_list = [ "#CD00CD", "#7AC5CD", "#7A8B8B", "#6B8E23", "#32CD32", "#8B0000", "#CDAD00", "#CD2626", "#FF0000"];   
    	function random_color()
    	{
          return '#'+Math.floor(Math.random()*0xffffff).toString(16);
        }
    
        //折线绘制
        var line_dis = 0;//z最后的距离
        var pre_pos = 0;
        function lineprint(polynum){
            for (j = 0; j < polynum.length; j++) {
                    var arr = new Array();//经纬度坐标数组
                   //调用分割函数分割
                    var coorlist=my_split(xys[j],',');
                    var order_list_1=my_split(order_list[j],',');
                    var order_sort_1=my_split(order_sort[j],',');//order_sort
                    var tw_1=my_split(tw[j],',');
                    var tw_list_1=my_split(tw_list[j],',');
                    var sort_list_bd=[];//sort_list绑定信息
                    var sort_pw_bd1=[];//sort_tw绑定
                    var sort_pw_bd2=[];//sort_tw绑定
                    sort_list_bd=sort_list_bind(order_sort_1,order_list_1);
                   
            //时间片和订单id绑定
            for(i=0;i<order_list.length;i++){
                if(order_sort_1[i]=='0'||order_sort_1[i]=='1')
              {
                   sort_pw_bd1[i]=tw_list_1[0];
                   sort_pw_bd2[i]=tw_list_1[1];
              }
              else if(order_sort_1[i]=='2'||order_sort_1[i]=='3')
              {
                sort_pw_bd1[i]=tw_list_1[2];
                sort_pw_bd2[i]=tw_list_1[3];
              }
              else if(order_sort_1[i]=='4'||order_sort_1[i]=='5')
              {
                sort_pw_bd1[i]=tw_list_1[4];
                sort_pw_bd2[i]=tw_list_1[5];
              }
              else if(order_sort_1[i]=='6'||order_sort_1[i]=='7')
              {
                sort_pw_bd1[i]=tw_list_1[6];
                sort_pw_bd2[i]=tw_list_1[7];
              }
              else if(order_sort_1[i]=='8'||order_sort_1[i]=='9')
              {
                sort_pw_bd1[i]=tw_list_1[8];
                sort_pw_bd2[i]=tw_list_1[9];
              }
              else if(order_sort_1[i]=='10'||order_sort_1[i]=='11')
              {
                sort_pw_bd1[i]=tw_list_1[10];
                sort_pw_bd2[i]=tw_list_1[11];
              }
              else if(order_sort_1[i]=='12'||order_sort_1[i]=='13')
              {
                sort_pw_bd1[i]=tw_list_1[12];
                sort_pw_bd2[i]=tw_list_1[13];
              }
            }
                    for (i = 0; i < coorlist.length; i += 2) {
                        //点的坐标
                        var x = parseFloat(coorlist[i]);
                        y = parseFloat(coorlist[i + 1]);
                        if (isNaN(x) || isNaN(y)) {
                            alert('请输入有效坐标数字！')
                        }
                        var temp_pos = new AMap.LngLat(x, y);
                        if (i == 0) {
                            pre_pos = temp_pos;
                        }
                        else {
                            line_dis += temp_pos.distance(pre_pos);
                            pre_pos = temp_pos;
                        }
                        var imageurl = "http://webapi.amap.com/theme/v1.3/markers/n/mark_b"+((i / 2) % 9 + 1)+".png";
                        var marker2 = new AMap.Marker({                
                                map: mapObj,
                                position:temp_pos,
                                offset: new AMap.Pixel(-14, -34), //相对于基点的位置                 
                                icon: new AMap.Icon({ //复杂图标                 
                                    size: new AMap.Size(28, 37), //图标大小                 
                                    image: imageurl, //大图地址                 
                                    imageOffset: new AMap.Pixel(0, 0) //相对于大图的取图位置                 
                                })
                             
    
    
                            });	
                               
                             var marker_content= String(order_sort_1[i/2]+'起始时间'+timeh(sort_pw_bd1[i/2]));
                               // 设置label标签
    					      marker2.setLabel({//label默认蓝框白底左上角显示，样式className为：amap-marker-label
    					      offset: new AMap.Pixel(20, 20),//修改label相对于maker的位置
    					      content: marker_content
    					       });
    					        
                            var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
                            function markerClick(e) {
                                infoWindow.setContent(e.target.content);
                                infoWindow.open(mapObj, e.target.getPosition());
                             }
                            //marker2.setTitle(x+';'+y+'\t'+'我是第点'+j);
                           // marker2.setTitle('拼成关系：'+order_cnt[j]+'拼'+'\n'+'跨越时间片：'+tw_cnt[j]+'\n'+'trip时间窗：'+tw[j]+'\n'+'当前订单时间片：'+timestampToTime(sort_pw_bd1[i/2])+"-"+timestampToTime(sort_pw_bd2[i/2])+'\n'+'trip接送顺序序号：'+order_sort_1[i/2]+'\n'+'订单ID：'+sort_list_bd[i/2]+'\n'+'订单经纬度位置：（'+x+';'+y+')'+'\n'+'匹配模式（match_mode）：'+match_mode[j]+'\n'+'路线分组（route_group）：'+route_group[j]+'\n'+'str值:'+str[j]+'\n'+'i:'+ is[j]+'\n'+'iter：'+iters[j]+'\n'+'order_list:'+order_list[j]+'\n'+'order_sort:'+order_sort[j]+'\n');
                            marker2.content = '拼成关系：'+order_cnt[j]+'拼'+'\t'+'跨越时间片：'+tw_cnt[j]+'\t'+'trip时间窗：'+tw[j]+'\t'+'当前订单时间片：'+timestampToTime(sort_pw_bd1[i/2])+"-"+timestampToTime(sort_pw_bd2[i/2])+'\t'+'trip接送顺序序号：'+order_sort_1[i/2]+'\t'+'订单ID：'+sort_list_bd[i/2]+'\t'+'订单经纬度位置：（'+x+';'+y+')'+'\t'+'匹配模式（match_mode）：'+match_mode[j]+'\t'+'路线分组（route_group）：'+route_group[j]+'\t'+'str值:'+str[j]+'\t'+'i:'+ is[j]+'\t'+'iter：'+iters[j]+'\t'+'order_list:'+order_list[j]+'\t'+'order_sort:'+order_sort[j]+'\t';
                            marker2.on('click', markerClick);
                            marker2.emit('click', {target: marker2});
                        arr.push(temp_pos);
                    }
    				
                    
                    var color = random_color();
                    //折线绘制
                    var polyline = new AMap.Polyline({
                        map: mapObj,
                        path: arr,
                        strokeColor: color,
                        //外边框透明度
                        strokeOpacity: 1,
                        //笔画粗细
                        strokeWeight: 3,
                        //设置返回用于笔触的颜色
                        strokeStyle: "solid",
                        //strokeDasharray: [5, 5],
    					fillColor: "#FFFFFF", //填充色
                        fillOpacity: 0.1,//填充透明度
                        //
    					showDir: true
                    });
    				polyline.setMap(mapObj);
                }
                var dis = 0;
                if (arr.length >= 2) {
                    dis = parseFloat(line_dis).toFixed(1)
                    document.getElementById('distance').innerHTML = dis + '米';
                }
        }
       
        function setMarker() {
                mapObj.clearMap();
                console.log('清除标注！');
                //getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
                var strallcoor = document.getElementById('LngLatCoors').value;
                getdata(strallcoor);
               // var line_dis = 0;//z最后的距离
                //var pre_pos = 0;
                console.log(xys);
                //绘制折线数组的长度
                lineprint(polynum);
                //调整视野到合适的位置及级别                 
                mapObj.setFitView();
                console.log('距离：', dis);
            }
        </script>
    </body>
    </html>